diff --git a/package.json b/package.json
index 64962ede..737f57e6 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@unocss/reset": "^0.60.4",
-    "@vue/repl": "^3.4.0",
+    "@vue/repl": "^4.2.1",
     "@vueuse/core": "^10.10.0",
     "element-plus": "^2.7.5",
     "semver": "^7.6.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ca0d3834..53bc6cf5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^0.60.4
         version: 0.60.4
       '@vue/repl':
-        specifier: ^3.4.0
-        version: 3.4.0
+        specifier: ^4.2.1
+        version: 4.2.1
       '@vueuse/core':
         specifier: ^10.10.0
         version: 10.10.0(vue@3.4.27(typescript@5.4.5))
@@ -869,8 +869,8 @@ packages:
   '@vue/reactivity@3.4.27':
     resolution: {integrity: sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==}
 
-  '@vue/repl@3.4.0':
-    resolution: {integrity: sha512-iHhIsmQsp9PJuOwverCRQC2owFb0FSFzk6YWwyirAX6AqH//2FrUV4WB16f9lGX5pDXAHjxlzAE6Lqf9P17HHA==}
+  '@vue/repl@4.2.1':
+    resolution: {integrity: sha512-kPpoAp0hQ1sKIGXEHtVdtdh2BgL97SAizEvCqRDB3LmgIYCPbzInwd4mqYkHstAhJPmkNslLd3rwfceMwzwinQ==}
 
   '@vue/runtime-core@3.4.27':
     resolution: {integrity: sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==}
@@ -3348,7 +3348,7 @@ snapshots:
     dependencies:
       '@vue/shared': 3.4.27
 
-  '@vue/repl@3.4.0': {}
+  '@vue/repl@4.2.1': {}
 
   '@vue/runtime-core@3.4.27':
     dependencies:
diff --git a/src/App.vue b/src/App.vue
index e7298b6f..139d434e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,11 @@
 <script setup lang="ts">
-import { Repl, type SFCOptions } from '@vue/repl'
+import { Repl } from '@vue/repl'
 import Monaco from '@vue/repl/monaco-editor'
-import type { ImportMap } from '@/utils/import-map'
-import type { UserOptions } from '@/composables/store'
+import { useStore } from './composables/store'
 
 const loading = ref(true)
 const replRef = ref<InstanceType<typeof Repl>>()
 
-// enable experimental features
-const sfcOptions: SFCOptions = {
-  script: {
-    propsDestructure: true,
-  },
-}
 const previewOptions = {
   headHTML: `
     <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"><\/script>
@@ -25,8 +18,6 @@ const previewOptions = {
   `,
 }
 
-const initialUserOptions: UserOptions = {}
-
 const dark = useDark()
 
 const theme = new URLSearchParams(location.search).get('theme')
@@ -34,43 +25,13 @@ if (theme === 'dark') {
   dark.value = true
 }
 
-const pr = new URLSearchParams(location.search).get('pr')
-if (pr) {
-  initialUserOptions.showHidden = true
-  initialUserOptions.styleSource = `https://preview-${pr}-element-plus.surge.sh/bundle/index.css`
-}
-
 const store = useStore({
   serializedState: location.hash.slice(1),
-  userOptions: initialUserOptions,
-  pr,
+  initialized: () => {
+    loading.value = false
+  },
 })
 
-if (pr) {
-  const map: ImportMap = {
-    imports: {
-      'element-plus': `https://preview-${pr}-element-plus.surge.sh/bundle/index.full.min.mjs`,
-      'element-plus/': 'unsupported',
-    },
-  }
-  store.state.files[IMPORT_MAP].code = JSON.stringify(map, undefined, 2)
-}
-
-if (pr || dark.value) {
-  const url = `${location.origin}${location.pathname}#${store.serialize()}`
-  history.replaceState({}, '', url)
-}
-
-if (store.pr) {
-  if (!store.userOptions.styleSource)
-    store.userOptions.styleSource = `https://preview-${store.pr}-element-plus.surge.sh/bundle/index.css`
-  store.versions.elementPlus = 'preview'
-}
-// eslint-disable-next-line unicorn/prefer-top-level-await
-store.init().then(() => (loading.value = false))
-if (!store.pr && store.userOptions.styleSource) {
-  store.pr = store.userOptions.styleSource.split('-', 2)[1]
-}
 // eslint-disable-next-line no-console
 console.log('Store:', store)
 
@@ -82,7 +43,13 @@ const handleKeydown = (evt: KeyboardEvent) => {
 }
 
 // persist state
-watchEffect(() => history.replaceState({}, '', `#${store.serialize()}`))
+watchEffect(() =>
+  history.replaceState(
+    {},
+    '',
+    `${location.origin}${location.pathname}#${store.serialize()}`,
+  ),
+)
 
 const refreshPreview = () => {
   replRef.value?.reload()
@@ -97,10 +64,7 @@ const refreshPreview = () => {
       :theme="dark ? 'dark' : 'light'"
       :store="store"
       :editor="Monaco"
-      show-compile-output
-      auto-resize
       :preview-options="previewOptions"
-      :sfc-options="sfcOptions"
       :clear-console="false"
       @keydown="handleKeydown"
     />
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 25bbbd16..6474377a 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -5,7 +5,7 @@ import {
   getSupportedVueVersions,
 } from '@/utils/dependency'
 import type { Ref } from 'vue'
-import type { ReplStore, VersionKey } from '@/composables/store'
+import type { Store, VersionKey } from '@/composables/store'
 
 const appVersion = import.meta.env.APP_VERSION
 const replVersion = import.meta.env.REPL_VERSION
@@ -18,7 +18,7 @@ const dark = useDark()
 const toggleDark = useToggle(dark)
 
 const { store } = defineProps<{
-  store: ReplStore
+  store: Store
 }>()
 
 interface Version {
diff --git a/src/composables/store.ts b/src/composables/store.ts
index 9b99e6c6..593de30f 100644
--- a/src/composables/store.ts
+++ b/src/composables/store.ts
@@ -1,19 +1,27 @@
-import { File, type Store, type StoreState, compileFile } from '@vue/repl'
+import {
+  File,
+  type ImportMap,
+  type StoreState,
+  compileFile,
+  mergeImportMap,
+  useStore as useReplStore,
+} from '@vue/repl'
+import { objectOmit } from '@vueuse/core'
 import { atou, utoa } from '@/utils/encode'
-import { genCdnLink, genImportMap, genVueLink } from '@/utils/dependency'
-import { type ImportMap, mergeImportMap } from '@/utils/import-map'
+import {
+  genCdnLink,
+  genCompilerSfcLink,
+  genImportMap,
+} from '@/utils/dependency'
 import { IS_DEV } from '@/constants'
+import elementPlusCode from '../template/element-plus.js?raw'
 import mainCode from '../template/main.vue?raw'
 import welcomeCode from '../template/welcome.vue?raw'
-import elementPlusCode from '../template/element-plus.js?raw'
 import tsconfigCode from '../template/tsconfig.json?raw'
-import type { UnwrapNestedRefs } from 'vue'
 
 export interface Initial {
   serializedState?: string
-  versions?: Versions
-  userOptions?: UserOptions
-  pr?: string | null
+  initialized?: () => void
 }
 export type VersionKey = 'vue' | 'elementPlus' | 'typescript'
 export type Versions = Record<VersionKey, string>
@@ -33,89 +41,86 @@ export const IMPORT_MAP = 'import-map.json'
 export const TSCONFIG = 'tsconfig.json'
 
 export const useStore = (initial: Initial) => {
-  const versions = reactive(
-    initial.versions ||
-      ({
-        vue: 'latest',
-        elementPlus: 'latest',
-        typescript: 'latest',
-      } satisfies Versions),
-  )
+  const saved: SerializeState | undefined = initial.serializedState
+    ? deserialize(initial.serializedState)
+    : undefined
+  const pr =
+    new URLSearchParams(location.search).get('pr') ||
+    saved?._o?.styleSource?.split('-', 2)[1]
+  const versions = reactive<Versions>({
+    vue: 'latest',
+    elementPlus: pr ? 'preview' : 'latest',
+    typescript: 'latest',
+  })
+  const userOptions: UserOptions = pr
+    ? {
+        showHidden: true,
+        styleSource: `https://preview-${pr}-element-plus.surge.sh/bundle/index.css`,
+      }
+    : {}
+  const hideFile = !IS_DEV && !userOptions.showHidden
 
-  const compiler = shallowRef<typeof import('vue/compiler-sfc')>()
   const [nightly, toggleNightly] = useToggle(false)
-  const userOptions = ref<UserOptions>(initial.userOptions || {})
-  const hideFile = computed(() => !IS_DEV && !userOptions.value.showHidden)
-
-  const _files = initFiles(initial.serializedState || '')
-
-  let activeFile = _files[APP_FILE]
-  if (!activeFile) activeFile = Object.values(_files)[0]
-
-  const state: StoreState = reactive({
-    mainFile: MAIN_FILE,
-    files: _files,
-    activeFile,
-    errors: [],
-    vueRuntimeURL: '',
-    vueServerRendererURL: '',
-    typescriptVersion: computed(() => versions.typescript),
-    resetFlip: false,
-    locale: undefined,
-    dependencyVersion: computed(() => ({
-      'element-plus': versions.elementPlus,
-    })),
+  const builtinImportMap = computed<ImportMap>(() => {
+    const importMap = genImportMap(versions, nightly.value)
+    if (pr)
+      mergeImportMap(importMap, {
+        imports: {
+          'element-plus': `https://preview-${pr}-element-plus.surge.sh/bundle/index.full.min.mjs`,
+          'element-plus/': 'unsupported',
+        },
+      })
+    return importMap
   })
 
-  const bultinImportMap = computed<ImportMap>(() =>
-    genImportMap(versions, nightly.value),
-  )
-  const userImportMap = computed<ImportMap>(() => {
-    const code = state.files[IMPORT_MAP]?.code.trim()
-    if (!code) return {}
-    let map: ImportMap = {}
-    try {
-      map = JSON.parse(code)
-    } catch (error) {
-      console.error(error)
-    }
-    return map
-  })
-  const importMap = computed<ImportMap>(() =>
-    mergeImportMap(bultinImportMap.value, userImportMap.value),
+  const storeState: Partial<StoreState> = toRefs(
+    reactive({
+      files: initFiles(),
+      mainFile: MAIN_FILE,
+      activeFilename: APP_FILE,
+      vueVersion: computed(() => versions.vue),
+      typescriptVersion: versions.typescript,
+      builtinImportMap,
+      template: {
+        welcomeSFC: mainCode,
+      },
+      sfcOptions: {
+        script: {
+          propsDestructure: true,
+        },
+      },
+    }),
   )
-
-  // eslint-disable-next-line no-console
-  console.log('Files:', state.files, 'Options:', userOptions)
-
-  const store = reactive<Store>({
-    state,
-    compiler: compiler as any,
-    initialShowOutput: false,
-    initialOutputMode: 'preview',
-    init,
-    setActive,
-    addFile,
-    deleteFile,
-    getImportMap,
-    renameFile,
-    getTsConfig,
-    reloadLanguageTools: undefined,
-    customElement: false,
+  const store = useReplStore(storeState)
+  store.files[ELEMENT_PLUS_FILE].hidden = hideFile
+  store.files[MAIN_FILE].hidden = hideFile
+  setVueVersion(versions.vue).then(() => {
+    initial.initialized?.()
   })
 
   watch(
     () => versions.elementPlus,
     (version) => {
-      const file = new File(
-        ELEMENT_PLUS_FILE,
-        generateElementPlusCode(version, userOptions.value.styleSource).trim(),
-        hideFile.value,
+      store.files[ELEMENT_PLUS_FILE].code = generateElementPlusCode(
+        version,
+        userOptions.styleSource,
+      ).trim()
+      compileFile(store, store.files[ELEMENT_PLUS_FILE]).then(
+        (errs) => (store.errors = errs),
+      )
+    },
+  )
+  watch(
+    builtinImportMap,
+    (newBuiltinImportMap) => {
+      const importMap = JSON.parse(store.files[IMPORT_MAP].code)
+      store.files[IMPORT_MAP].code = JSON.stringify(
+        mergeImportMap(importMap, newBuiltinImportMap),
+        undefined,
+        2,
       )
-      state.files[ELEMENT_PLUS_FILE] = file
-      compileFile(store, file).then((errs) => (state.errors = errs))
     },
-    { immediate: true },
+    { deep: true },
   )
 
   function generateElementPlusCode(version: string, styleSource?: string) {
@@ -134,75 +139,40 @@ export const useStore = (initial: Initial) => {
       .replace('#STYLE#', style)
       .replace('#DARKSTYLE#', darkStyle)
   }
-
-  async function setVueVersion(version: string) {
-    const { compilerSfc, runtimeDom } = genVueLink(version)
-
-    compiler.value = await import(/* @vite-ignore */ compilerSfc)
-    state.vueRuntimeURL = runtimeDom
-    versions.vue = version
-
-    // eslint-disable-next-line no-console
-    console.info(`[@vue/repl] Now using Vue version: ${version}`)
-  }
-
-  let inited = false
-
-  async function init() {
-    if (inited) return
-
-    await setVueVersion(versions.vue)
-
-    state.errors = []
-    for (const file of Object.values(state.files)) {
-      compileFile(store, file).then((errs) => state.errors.push(...errs))
+  function init() {
+    watchEffect(() => {
+      compileFile(store, store.activeFile).then((errs) => (store.errors = errs))
+    })
+    for (const [filename, file] of Object.entries(store.files)) {
+      if (filename === store.activeFilename) continue
+      compileFile(store, file).then((errs) => store.errors.push(...errs))
     }
 
-    watchEffect(() =>
-      compileFile(store, state.activeFile).then(
-        (errs) => (state.errors = errs),
-      ),
-    )
-
     watch(
       () => [
-        state.files[TSCONFIG]?.code,
-        state.typescriptVersion,
-        state.locale,
-        state.dependencyVersion,
+        store.files[TSCONFIG]?.code,
+        store.typescriptVersion,
+        store.locale,
+        store.dependencyVersion,
+        store.vueVersion,
       ],
       useDebounceFn(() => store.reloadLanguageTools?.(), 300),
       { deep: true },
     )
-
-    inited = true
-  }
-
-  function getFiles() {
-    const exported: Record<string, string> = {}
-    for (const file of Object.values(state.files)) {
-      if (file.hidden) continue
-      exported[file.filename] = file.code
-    }
-    return exported
   }
-
   function serialize() {
-    const state: SerializeState = { ...getFiles() }
-    state._o = userOptions.value
+    const state: SerializeState = { ...store.getFiles() }
+    state._o = userOptions
     return utoa(JSON.stringify(state))
   }
   function deserialize(text: string): SerializeState {
     const state = JSON.parse(atou(text))
     return state
   }
-
-  function initFiles(serializedState: string) {
-    const files: StoreState['files'] = {}
-    if (serializedState) {
-      const saved = deserialize(serializedState)
-      for (let [filename, file] of Object.entries(saved)) {
-        if (filename === '_o') continue
+  function initFiles() {
+    const files: Record<string, File> = Object.create(null)
+    if (saved) {
+      for (let [filename, file] of Object.entries(objectOmit(saved, ['_o']))) {
         if (
           ![IMPORT_MAP, TSCONFIG].includes(filename) &&
           !filename.startsWith('src/')
@@ -214,15 +184,13 @@ export const useStore = (initial: Initial) => {
         }
         files[filename] = new File(filename, file as string)
       }
-      userOptions.value = saved._o || {}
     } else {
       files[APP_FILE] = new File(APP_FILE, welcomeCode)
     }
-    files[MAIN_FILE] = new File(MAIN_FILE, mainCode, hideFile.value)
-    if (!files[IMPORT_MAP]) {
-      files[IMPORT_MAP] = new File(
-        IMPORT_MAP,
-        JSON.stringify({ imports: {} }, undefined, 2),
+    if (!files[ELEMENT_PLUS_FILE]) {
+      files[ELEMENT_PLUS_FILE] = new File(
+        ELEMENT_PLUS_FILE,
+        generateElementPlusCode(versions.elementPlus, userOptions.styleSource),
       )
     }
     if (!files[TSCONFIG]) {
@@ -230,106 +198,12 @@ export const useStore = (initial: Initial) => {
     }
     return files
   }
-
-  function setActive(filename: string) {
-    const file = state.files[filename]
-    if (file.hidden) return
-    state.activeFile = state.files[filename]
-  }
-
-  function addFile(fileOrFilename: string | File) {
-    const file =
-      typeof fileOrFilename === 'string'
-        ? new File(fileOrFilename)
-        : fileOrFilename
-    state.files[file.filename] = file
-    setActive(file.filename)
-  }
-
-  function renameFile(oldFilename: string, newFilename: string) {
-    const file = state.files[oldFilename]
-
-    if (!file) {
-      state.errors = [`Could not rename "${oldFilename}", file not found`]
-      return
-    }
-
-    if (!newFilename || oldFilename === newFilename) {
-      state.errors = [`Cannot rename "${oldFilename}" to "${newFilename}"`]
-      return
-    }
-
-    if (
-      file.hidden ||
-      [APP_FILE, MAIN_FILE, ELEMENT_PLUS_FILE, IMPORT_MAP].includes(oldFilename)
-    ) {
-      state.errors = [`Cannot rename ${oldFilename}`]
-      return
-    }
-
-    file.filename = newFilename
-
-    const newFiles: Record<string, File> = {}
-
-    // Preserve iteration order for files
-    for (const name of Object.keys(_files)) {
-      if (name === oldFilename) {
-        newFiles[newFilename] = file
-      } else {
-        newFiles[name] = _files[name]
-      }
-    }
-
-    state.files = newFiles
-    compileFile(store, file)
-  }
-
-  async function deleteFile(filename: string) {
-    if (
-      [
-        ELEMENT_PLUS_FILE,
-        MAIN_FILE,
-        APP_FILE,
-        ELEMENT_PLUS_FILE,
-        IMPORT_MAP,
-      ].includes(filename)
-    ) {
-      ElMessage.warning(
-        'You cannot remove it, because Element Plus requires it.',
-      )
-      return
-    }
-
-    if (
-      await ElMessageBox.confirm(
-        `Are you sure you want to delete ${filename.replace(/^src\//, '')}?`,
-        {
-          title: 'Delete File',
-          type: 'warning',
-          center: true,
-        },
-      )
-    ) {
-      if (state.activeFile.filename === filename) {
-        setActive(APP_FILE)
-      }
-      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-      delete state.files[filename]
-    }
-  }
-
-  function getImportMap() {
-    return importMap.value
-  }
-
-  function getTsConfig() {
-    try {
-      return JSON.parse(state.files[TSCONFIG].code)
-    } catch {
-      return {}
-    }
+  async function setVueVersion(version: string) {
+    store.compiler = await import(
+      /* @vite-ignore */ genCompilerSfcLink(version)
+    )
+    versions.vue = version
   }
-
   async function setVersion(key: VersionKey, version: string) {
     switch (key) {
       case 'vue':
@@ -339,25 +213,22 @@ export const useStore = (initial: Initial) => {
         versions.elementPlus = version
         break
       case 'typescript':
-        versions.typescript = version
+        store.typescriptVersion = version
         break
     }
   }
 
   const utils = {
     versions,
-    nightly,
-    userOptions,
-    pr: initial.pr,
-    serialize,
+    pr,
     setVersion,
     toggleNightly,
+    serialize,
+    init,
   }
   Object.assign(store, utils)
 
-  return store as Omit<typeof store, 'init'> & {
-    init: typeof init
-  } & UnwrapNestedRefs<typeof utils>
+  return store as typeof store & typeof utils
 }
 
-export type ReplStore = ReturnType<typeof useStore>
+export type Store = ReturnType<typeof useStore>
diff --git a/src/utils/dependency.ts b/src/utils/dependency.ts
index bf725d14..ed6281bc 100644
--- a/src/utils/dependency.ts
+++ b/src/utils/dependency.ts
@@ -2,7 +2,7 @@ import { gte } from 'semver'
 import type { Ref } from 'vue'
 import type { MaybeRef } from '@vueuse/core'
 import type { Versions } from '@/composables/store'
-import type { ImportMap } from '@/utils/import-map'
+import type { ImportMap } from '@vue/repl'
 
 export interface Dependency {
   pkg?: string
@@ -29,21 +29,12 @@ export const genCdnLink = (
   }
 }
 
-export const genVueLink = (version: string) => {
-  const compilerSfc = genCdnLink(
+export const genCompilerSfcLink = (version: string) => {
+  return genCdnLink(
     '@vue/compiler-sfc',
     version,
     '/dist/compiler-sfc.esm-browser.js',
   )
-  const runtimeDom = genCdnLink(
-    '@vue/runtime-dom',
-    version,
-    '/dist/runtime-dom.esm-browser.js',
-  )
-  return {
-    compilerSfc,
-    runtimeDom,
-  }
 }
 
 export const genImportMap = (
diff --git a/src/utils/import-map.ts b/src/utils/import-map.ts
deleted file mode 100644
index a76b589b..00000000
--- a/src/utils/import-map.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export interface ImportMap {
-  imports?: Record<string, string>
-  scopes?: Record<string, string>
-}
-
-export const mergeImportMap = (a: ImportMap, b: ImportMap): ImportMap => {
-  return {
-    imports: {
-      ...(a.imports || {}),
-      ...(b.imports || {}),
-    },
-    scopes: {
-      ...(a.scopes || {}),
-      ...(b.scopes || {}),
-    },
-  }
-}