From f1878e40a4bfd4c0cc57c5728a64af4b6e3e4a40 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Wed, 16 Jul 2025 10:49:41 +0800
Subject: [PATCH] chore: tweaks

---
 packages-private/sfc-playground/package.json  |  2 +-
 packages-private/sfc-playground/src/App.vue   | 25 ++++++++-----------
 .../sfc-playground/src/Header.vue             |  3 ---
 pnpm-lock.yaml                                | 10 ++++----
 4 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/packages-private/sfc-playground/package.json b/packages-private/sfc-playground/package.json
index 9e529671ad..1d44af0787 100644
--- a/packages-private/sfc-playground/package.json
+++ b/packages-private/sfc-playground/package.json
@@ -13,7 +13,7 @@
     "vite": "catalog:"
   },
   "dependencies": {
-    "@vue/repl": "https://pkg.pr.new/@vue/repl@cc87b48",
+    "@vue/repl": "https://pkg.pr.new/@vue/repl@0c1d0f7",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
     "vue": "workspace:*"
diff --git a/packages-private/sfc-playground/src/App.vue b/packages-private/sfc-playground/src/App.vue
index 9167af9e1b..cb61e7deba 100644
--- a/packages-private/sfc-playground/src/App.vue
+++ b/packages-private/sfc-playground/src/App.vue
@@ -8,7 +8,7 @@ import {
   StoreState,
 } from '@vue/repl'
 import Monaco from '@vue/repl/monaco-editor'
-import { ref, watchEffect, onMounted, computed } from 'vue'
+import { ref, watchEffect, onMounted, computed, watch } from 'vue'
 
 const replRef = ref<InstanceType<typeof Repl>>()
 
@@ -132,19 +132,17 @@ onMounted(() => {
 })
 
 const isVaporSupported = ref(false)
-function handleVueVersionChange(
-  version: string | null,
-  reload: boolean = true,
-) {
-  if (!version) {
-    isVaporSupported.value = true
-  } else {
-    const [major, minor] = version.split('.').map(Number)
+watch(
+  () => store.vueVersion,
+  (version, oldVersion) => {
+    const [major, minor] = (version || store.compiler.version)
+      .split('.')
+      .map(Number)
     isVaporSupported.value = major > 3 || (major === 3 && minor >= 6)
-  }
-  if (reload) reloadPage()
-}
-handleVueVersionChange(vueVersion.value, false)
+    if (oldVersion) reloadPage()
+  },
+  { immediate: true, flush: 'pre' },
+)
 
 const previewOptions = computed(() => ({
   customCode: {
@@ -174,7 +172,6 @@ const previewOptions = computed(() => ({
     @toggle-ssr="toggleSSR"
     @toggle-autosave="toggleAutoSave"
     @reload-page="reloadPage"
-    @change-vue-version="handleVueVersionChange"
   />
   <Repl
     ref="replRef"
diff --git a/packages-private/sfc-playground/src/Header.vue b/packages-private/sfc-playground/src/Header.vue
index 1c24b9ab30..132453e986 100644
--- a/packages-private/sfc-playground/src/Header.vue
+++ b/packages-private/sfc-playground/src/Header.vue
@@ -24,7 +24,6 @@ const emit = defineEmits([
   'toggle-vapor',
   'toggle-autosave',
   'reload-page',
-  'change-vue-version',
 ])
 
 const { store } = props
@@ -39,12 +38,10 @@ const vueVersion = computed(() => {
 })
 
 async function setVueVersion(v: string) {
-  emit('change-vue-version', v)
   store.vueVersion = v
 }
 
 function resetVueVersion() {
-  emit('change-vue-version', null)
   store.vueVersion = null
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cbaee656b3..727d4d445d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -251,8 +251,8 @@ importers:
   packages-private/sfc-playground:
     dependencies:
       '@vue/repl':
-        specifier: https://pkg.pr.new/@vue/repl@cc87b48
-        version: https://pkg.pr.new/@vue/repl@cc87b48
+        specifier: https://pkg.pr.new/@vue/repl@0c1d0f7
+        version: https://pkg.pr.new/@vue/repl@0c1d0f7
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
@@ -1650,8 +1650,8 @@ packages:
   '@vue/reactivity@3.6.0-alpha.1':
     resolution: {integrity: sha512-h/Rscsd7OhcBM3YWKwEg4FG5iLSjASMZVl5ahPfma19xig/MhwKrUc9dE4tLNMtd3ZbocIPzZsV+O4fgoAZFdw==}
 
-  '@vue/repl@https://pkg.pr.new/@vue/repl@cc87b48':
-    resolution: {tarball: https://pkg.pr.new/@vue/repl@cc87b48}
+  '@vue/repl@https://pkg.pr.new/@vue/repl@0c1d0f7':
+    resolution: {tarball: https://pkg.pr.new/@vue/repl@0c1d0f7}
     version: 4.6.1
 
   '@vue/runtime-core@3.6.0-alpha.1':
@@ -4843,7 +4843,7 @@ snapshots:
     dependencies:
       '@vue/shared': 3.6.0-alpha.1
 
-  '@vue/repl@https://pkg.pr.new/@vue/repl@cc87b48': {}
+  '@vue/repl@https://pkg.pr.new/@vue/repl@0c1d0f7': {}
 
   '@vue/runtime-core@3.6.0-alpha.1':
     dependencies:
-- 
2.47.2