diff --git a/playground/src/App.vue b/playground/src/App.vue
index ff75999..03a20ba 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -192,19 +192,18 @@ async function getShiki(
   });
 }
 
-let highlighter: HighlighterGeneric<BundledLanguage, BundledTheme>;
-
-watch([colorMode, mode, len, min, max, refreshKey], () =>
-  getShiki(highlighter),
-);
-onMounted(async () => {
+async function getShikiHighlighter() {
   highlighter = await getHighlighter({
     themes: [colorMode.value === 'light' ? 'min-light' : 'github-dark'],
     langs: ['typescript'],
   });
-
   await getShiki(highlighter);
-});
+}
+
+let highlighter: HighlighterGeneric<BundledLanguage, BundledTheme>;
+watch([mode, len, min, max, refreshKey], () => getShiki(highlighter));
+watch(colorMode, getShikiHighlighter);
+onMounted(getShikiHighlighter);
 </script>
 
 <style>