diff --git a/packages/core/src/App.ts b/packages/core/src/App.ts
index c0259256..51f39840 100644
--- a/packages/core/src/App.ts
+++ b/packages/core/src/App.ts
@@ -212,8 +212,8 @@ class App extends EventEmitter implements AppCore {
     this.components.delete(type);
   }
 
-  public resolveComponent(type: string) {
-    return this.components.get(type);
+  public resolveComponent<T = any>(type: string) {
+    return this.components.get(type) as T;
   }
 
   public bindEvents() {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 420dcaa7..571fdac0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,7 +49,7 @@ importers:
         version: 3.3.0(typescript@5.4.2)
       element-plus:
         specifier: ^2.6.1
-        version: 2.6.1(vue@3.4.27(typescript@5.4.2))
+        version: 2.6.1(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
       enquirer:
         specifier: ^2.3.6
         version: 2.3.6
@@ -118,7 +118,7 @@ importers:
         version: 5.2.11(@types/node@18.19.3)(sass@1.77.0)(terser@5.31.0)
       vitepress:
         specifier: 1.1.4
-        version: 1.1.4(@algolia/client-search@4.9.1)(@types/node@18.19.3)(@types/react@17.0.37)(async-validator@4.2.5)(axios@0.25.0)(postcss@8.4.38)(qrcode@1.5.0)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)(sass@1.77.0)(search-insights@2.9.0)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.2)
+        version: 1.1.4(@algolia/client-search@4.9.1)(@types/node@18.19.3)(@types/react@17.0.37)(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(async-validator@4.2.5)(axios@0.25.0)(postcss@8.4.38)(qrcode@1.5.0)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)(sass@1.77.0)(search-insights@2.9.0)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.2)
       vitest:
         specifier: ^1.6.0
         version: 1.6.0(@types/node@18.19.3)(jsdom@19.0.0)(sass@1.77.0)(terser@5.31.0)
@@ -400,7 +400,7 @@ importers:
         version: link:../design
       element-plus:
         specifier: ^2.6.1
-        version: 2.6.1(vue@3.4.27(typescript@5.4.2))
+        version: 2.6.1(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
     devDependencies:
       '@types/node':
         specifier: ^18.19.0
@@ -754,7 +754,7 @@ importers:
         version: 1.4.5(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/form@1.4.5(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(vue@3.4.27(typescript@5.4.2)))(@tmagic/schema@1.4.5)(@tmagic/stage@1.4.5(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(scenejs@1.9.4))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(monaco-editor@0.48.0)(vue@3.4.27(typescript@5.4.2))
       '@tmagic/element-plus-adapter':
         specifier: 1.4.5
-        version: 1.4.5(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(element-plus@2.6.1(vue@3.4.27(typescript@5.4.2)))
+        version: 1.4.5(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(element-plus@2.6.1(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2)))
       '@tmagic/form':
         specifier: 1.4.5
         version: 1.4.5(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(vue@3.4.27(typescript@5.4.2))
@@ -766,13 +766,13 @@ importers:
         version: 1.4.5(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(scenejs@1.9.4)
       '@tmagic/tmagic-form-runtime':
         specifier: 1.0.2
-        version: 1.0.2(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/editor@1.4.5(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/form@1.4.5(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(vue@3.4.27(typescript@5.4.2)))(@tmagic/schema@1.4.5)(@tmagic/stage@1.4.5(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(scenejs@1.9.4))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(monaco-editor@0.48.0)(vue@3.4.27(typescript@5.4.2)))(@tmagic/form@1.4.5(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(vue@3.4.27(typescript@5.4.2)))(@tmagic/schema@1.4.5)(element-plus@2.6.1(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
+        version: 1.0.2(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/editor@1.4.5(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/form@1.4.5(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(vue@3.4.27(typescript@5.4.2)))(@tmagic/schema@1.4.5)(@tmagic/stage@1.4.5(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(scenejs@1.9.4))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(monaco-editor@0.48.0)(vue@3.4.27(typescript@5.4.2)))(@tmagic/form@1.4.5(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(vue@3.4.27(typescript@5.4.2)))(@tmagic/schema@1.4.5)(element-plus@2.6.1(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
       '@tmagic/utils':
         specifier: 1.4.5
         version: 1.4.5(@tmagic/schema@1.4.5)
       element-plus:
         specifier: ^2.6.1
-        version: 2.6.1(vue@3.4.27(typescript@5.4.2))
+        version: 2.6.1(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
       monaco-editor:
         specifier: ^0.48.0
         version: 0.48.0
@@ -815,7 +815,7 @@ importers:
         version: 5.4.2
       unplugin-auto-import:
         specifier: ^0.12.0
-        version: 0.12.0(@vueuse/core@10.9.0(vue@3.4.27(typescript@5.4.2)))(rollup@2.25.0)
+        version: 0.12.0(@vueuse/core@10.9.0(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2)))(rollup@2.25.0)
       unplugin-vue-components:
         specifier: ^0.22.11
         version: 0.22.11(@babel/parser@7.24.5)(rollup@2.25.0)(vue@3.4.27(typescript@5.4.2))
@@ -906,7 +906,7 @@ importers:
         version: link:../../packages/utils
       element-plus:
         specifier: ^2.6.1
-        version: 2.6.1(vue@3.4.27(typescript@5.4.2))
+        version: 2.6.1(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
       vue:
         specifier: ^3.4.27
         version: 3.4.27(typescript@5.4.2)
@@ -933,6 +933,43 @@ importers:
         specifier: ^2.0.16
         version: 2.0.16(typescript@5.4.2)
 
+  runtime/vue-runtime-help:
+    dependencies:
+      '@tmagic/core':
+        specifier: workspace:*
+        version: link:../../packages/core
+      '@tmagic/data-source':
+        specifier: workspace:*
+        version: link:../../packages/data-source
+      '@tmagic/schema':
+        specifier: workspace:*
+        version: link:../../packages/schema
+      '@tmagic/stage':
+        specifier: workspace:*
+        version: link:../../packages/stage
+      '@tmagic/utils':
+        specifier: workspace:*
+        version: link:../../packages/utils
+      '@vue/composition-api':
+        specifier: '>=1.7.2'
+        version: 1.7.2(vue@3.4.27(typescript@5.4.2))
+      vue:
+        specifier: '>=2.0.0 || >=3.0.0'
+        version: 3.4.27(typescript@5.4.2)
+      vue-demi:
+        specifier: ^0.14.7
+        version: 0.14.7(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
+    devDependencies:
+      '@types/node':
+        specifier: ^18.19.0
+        version: 18.19.3
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      typescript:
+        specifier: ^5.4.2
+        version: 5.4.2
+
   runtime/vue2:
     dependencies:
       '@tmagic/cli':
@@ -947,15 +984,15 @@ importers:
       '@tmagic/schema':
         specifier: 1.4.5
         version: 1.4.5
-      '@tmagic/stage':
-        specifier: 1.4.5
-        version: 1.4.5(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(scenejs@1.9.4)
       '@tmagic/ui-vue2':
         specifier: 1.4.5
         version: 1.4.5(dayjs@1.11.11)(qrcode@1.5.0)(vue@2.7.4)
       '@tmagic/utils':
         specifier: 1.4.5
         version: 1.4.5(@tmagic/schema@1.4.5)
+      '@tmagic/vue-runtime-help':
+        specifier: ^0.0.2
+        version: 0.0.2(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(@vue/composition-api@1.7.2(vue@2.7.4))(scenejs@1.9.4)(vue@2.7.4)
       axios:
         specifier: ^0.25.0
         version: 0.25.0
@@ -993,9 +1030,6 @@ importers:
 
   runtime/vue3:
     dependencies:
-      '@tmagic/cli':
-        specifier: 1.4.5
-        version: 1.4.5
       '@tmagic/core':
         specifier: 1.4.5
         version: 1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))
@@ -1005,15 +1039,15 @@ importers:
       '@tmagic/schema':
         specifier: 1.4.5
         version: 1.4.5
-      '@tmagic/stage':
-        specifier: 1.4.5
-        version: 1.4.5(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(scenejs@1.9.4)
       '@tmagic/ui':
         specifier: 1.4.5
         version: 1.4.5(dayjs@1.11.11)(qrcode@1.5.0)(vue@3.4.27(typescript@5.4.2))
       '@tmagic/utils':
         specifier: 1.4.5
         version: 1.4.5(@tmagic/schema@1.4.5)
+      '@tmagic/vue-runtime-help':
+        specifier: ^0.0.2
+        version: 0.0.2(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(scenejs@1.9.4)(vue@3.4.27(typescript@5.4.2))
       axios:
         specifier: ^0.25.0
         version: 0.25.0
@@ -1021,6 +1055,9 @@ importers:
         specifier: ^3.4.27
         version: 3.4.27(typescript@5.4.2)
     devDependencies:
+      '@tmagic/cli':
+        specifier: 1.4.5
+        version: 1.4.5
       '@types/node':
         specifier: ^18.19.0
         version: 18.19.3
@@ -2812,6 +2849,20 @@ packages:
     peerDependencies:
       '@tmagic/schema': 1.4.5
 
+  '@tmagic/vue-runtime-help@0.0.2':
+    resolution: {integrity: sha512-bE2Fmt9pXlS4AZn/oJZfojId2erKID1FleYxGswUjFAMF4heoPU4/Bhl17cA3jn/hQAQpUWtW+Xqj5KwZAkWaw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@tmagic/core': 1.4.5
+      '@tmagic/data-source': 1.4.5
+      '@tmagic/schema': 1.4.5
+      '@tmagic/utils': 1.4.5
+      '@vue/composition-api': '>=1.7.2'
+      vue: '>=2.0.0 || >=3.0.0'
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   '@tootallnate/once@2.0.0':
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
@@ -3067,6 +3118,11 @@ packages:
   '@vue/compiler-ssr@3.4.27':
     resolution: {integrity: sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==}
 
+  '@vue/composition-api@1.7.2':
+    resolution: {integrity: sha512-M8jm9J/laYrYT02665HkZ5l2fWTK4dcVg3BsDHm/pfz+MjDYwX+9FUaZyGwEyXEDonQYRCo0H7aLgdklcIELjw==}
+    peerDependencies:
+      vue: '>= 2.5 < 2.7'
+
   '@vue/devtools-api@6.5.0':
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
 
@@ -6104,17 +6160,6 @@ packages:
   vue-component-type-helpers@2.0.16:
     resolution: {integrity: sha512-qisL/iAfdO++7w+SsfYQJVPj6QKvxp4i1MMxvsNO41z/8zu3KuAw9LkhKUfP/kcOWGDxESp+pQObWppXusejCA==}
 
-  vue-demi@0.14.6:
-    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
-    engines: {node: '>=12'}
-    hasBin: true
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-
   vue-demi@0.14.7:
     resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
     engines: {node: '>=12'}
@@ -8187,10 +8232,10 @@ snapshots:
       serialize-javascript: 6.0.0
       vue: 3.4.27(typescript@5.4.2)
 
-  '@tmagic/element-plus-adapter@1.4.5(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(element-plus@2.6.1(vue@3.4.27(typescript@5.4.2)))':
+  '@tmagic/element-plus-adapter@1.4.5(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(element-plus@2.6.1(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2)))':
     dependencies:
       '@tmagic/design': 1.4.5(vue@3.4.27(typescript@5.4.2))
-      element-plus: 2.6.1(vue@3.4.27(typescript@5.4.2))
+      element-plus: 2.6.1(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
 
   '@tmagic/form@1.4.5(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(vue@3.4.27(typescript@5.4.2))':
     dependencies:
@@ -8227,14 +8272,14 @@ snapshots:
       lodash-es: 4.17.21
       vue: 3.4.27(typescript@5.4.2)
 
-  ? '@tmagic/tmagic-form-runtime@1.0.2(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/editor@1.4.5(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/form@1.4.5(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(vue@3.4.27(typescript@5.4.2)))(@tmagic/schema@1.4.5)(@tmagic/stage@1.4.5(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(scenejs@1.9.4))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(monaco-editor@0.48.0)(vue@3.4.27(typescript@5.4.2)))(@tmagic/form@1.4.5(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(vue@3.4.27(typescript@5.4.2)))(@tmagic/schema@1.4.5)(element-plus@2.6.1(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))'
+  ? '@tmagic/tmagic-form-runtime@1.0.2(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/editor@1.4.5(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/form@1.4.5(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(vue@3.4.27(typescript@5.4.2)))(@tmagic/schema@1.4.5)(@tmagic/stage@1.4.5(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(scenejs@1.9.4))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(monaco-editor@0.48.0)(vue@3.4.27(typescript@5.4.2)))(@tmagic/form@1.4.5(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(vue@3.4.27(typescript@5.4.2)))(@tmagic/schema@1.4.5)(element-plus@2.6.1(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))'
   : dependencies:
       '@tmagic/core': 1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))
       '@tmagic/editor': 1.4.5(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/form@1.4.5(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(vue@3.4.27(typescript@5.4.2)))(@tmagic/schema@1.4.5)(@tmagic/stage@1.4.5(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(scenejs@1.9.4))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(monaco-editor@0.48.0)(vue@3.4.27(typescript@5.4.2))
       '@tmagic/form': 1.4.5(@tmagic/design@1.4.5(vue@3.4.27(typescript@5.4.2)))(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(vue@3.4.27(typescript@5.4.2))
       '@tmagic/schema': 1.4.5
       '@tmagic/utils': 1.4.5(@tmagic/schema@1.4.5)
-      element-plus: 2.6.1(vue@3.4.27(typescript@5.4.2))
+      element-plus: 2.6.1(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
       vue: 3.4.27(typescript@5.4.2)
     transitivePeerDependencies:
       - '@tmagic/data-source'
@@ -8284,6 +8329,34 @@ snapshots:
       dayjs: 1.11.11
       lodash-es: 4.17.21
 
+  '@tmagic/vue-runtime-help@0.0.2(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(@vue/composition-api@1.7.2(vue@2.7.4))(scenejs@1.9.4)(vue@2.7.4)':
+    dependencies:
+      '@tmagic/core': 1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))
+      '@tmagic/data-source': 1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))
+      '@tmagic/schema': 1.4.5
+      '@tmagic/stage': 1.4.5(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(scenejs@1.9.4)
+      '@tmagic/utils': 1.4.5(@tmagic/schema@1.4.5)
+      vue: 2.7.4
+      vue-demi: 0.14.7(@vue/composition-api@1.7.2(vue@2.7.4))(vue@2.7.4)
+    optionalDependencies:
+      '@vue/composition-api': 1.7.2(vue@2.7.4)
+    transitivePeerDependencies:
+      - scenejs
+
+  '@tmagic/vue-runtime-help@0.0.2(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(scenejs@1.9.4)(vue@3.4.27(typescript@5.4.2))':
+    dependencies:
+      '@tmagic/core': 1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))
+      '@tmagic/data-source': 1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))
+      '@tmagic/schema': 1.4.5
+      '@tmagic/stage': 1.4.5(@tmagic/core@1.4.5(@tmagic/data-source@1.4.5(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5)))(@tmagic/schema@1.4.5)(@tmagic/utils@1.4.5(@tmagic/schema@1.4.5))(scenejs@1.9.4)
+      '@tmagic/utils': 1.4.5(@tmagic/schema@1.4.5)
+      vue: 3.4.27(typescript@5.4.2)
+      vue-demi: 0.14.7(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
+    optionalDependencies:
+      '@vue/composition-api': 1.7.2(vue@3.4.27(typescript@5.4.2))
+    transitivePeerDependencies:
+      - scenejs
+
   '@tootallnate/once@2.0.0': {}
 
   '@types/aria-query@4.2.2': {}
@@ -8628,6 +8701,15 @@ snapshots:
       '@vue/compiler-dom': 3.4.27
       '@vue/shared': 3.4.27
 
+  '@vue/composition-api@1.7.2(vue@2.7.4)':
+    dependencies:
+      vue: 2.7.4
+    optional: true
+
+  '@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2))':
+    dependencies:
+      vue: 3.4.27(typescript@5.4.2)
+
   '@vue/devtools-api@6.5.0': {}
 
   '@vue/devtools-api@7.1.3(vue@3.4.27(typescript@5.4.2))':
@@ -8689,31 +8771,31 @@ snapshots:
       js-beautify: 1.15.1
       vue-component-type-helpers: 2.0.16
 
-  '@vueuse/core@10.9.0(vue@3.4.27(typescript@5.4.2))':
+  '@vueuse/core@10.9.0(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.9.0
-      '@vueuse/shared': 10.9.0(vue@3.4.27(typescript@5.4.2))
-      vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.2))
+      '@vueuse/shared': 10.9.0(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
+      vue-demi: 0.14.7(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/core@9.13.0(vue@3.4.27(typescript@5.4.2))':
+  '@vueuse/core@9.13.0(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))':
     dependencies:
       '@types/web-bluetooth': 0.0.16
       '@vueuse/metadata': 9.13.0
-      '@vueuse/shared': 9.13.0(vue@3.4.27(typescript@5.4.2))
-      vue-demi: 0.14.6(vue@3.4.27(typescript@5.4.2))
+      '@vueuse/shared': 9.13.0(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
+      vue-demi: 0.14.7(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/integrations@10.9.0(async-validator@4.2.5)(axios@0.25.0)(focus-trap@7.5.4)(qrcode@1.5.0)(sortablejs@1.15.2)(vue@3.4.27(typescript@5.4.2))':
+  '@vueuse/integrations@10.9.0(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(async-validator@4.2.5)(axios@0.25.0)(focus-trap@7.5.4)(qrcode@1.5.0)(sortablejs@1.15.2)(vue@3.4.27(typescript@5.4.2))':
     dependencies:
-      '@vueuse/core': 10.9.0(vue@3.4.27(typescript@5.4.2))
-      '@vueuse/shared': 10.9.0(vue@3.4.27(typescript@5.4.2))
-      vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.2))
+      '@vueuse/core': 10.9.0(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
+      '@vueuse/shared': 10.9.0(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
+      vue-demi: 0.14.7(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
     optionalDependencies:
       async-validator: 4.2.5
       axios: 0.25.0
@@ -8728,16 +8810,16 @@ snapshots:
 
   '@vueuse/metadata@9.13.0': {}
 
-  '@vueuse/shared@10.9.0(vue@3.4.27(typescript@5.4.2))':
+  '@vueuse/shared@10.9.0(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))':
     dependencies:
-      vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.2))
+      vue-demi: 0.14.7(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/shared@9.13.0(vue@3.4.27(typescript@5.4.2))':
+  '@vueuse/shared@9.13.0(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))':
     dependencies:
-      vue-demi: 0.14.6(vue@3.4.27(typescript@5.4.2))
+      vue-demi: 0.14.7(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -9500,7 +9582,7 @@ snapshots:
 
   electron-to-chromium@1.4.761: {}
 
-  element-plus@2.6.1(vue@3.4.27(typescript@5.4.2)):
+  element-plus@2.6.1(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2)):
     dependencies:
       '@ctrl/tinycolor': 3.6.0
       '@element-plus/icons-vue': 2.3.1(vue@3.4.27(typescript@5.4.2))
@@ -9508,7 +9590,7 @@ snapshots:
       '@popperjs/core': '@sxzz/popperjs-es@2.11.7'
       '@types/lodash': 4.14.192
       '@types/lodash-es': 4.17.7
-      '@vueuse/core': 9.13.0(vue@3.4.27(typescript@5.4.2))
+      '@vueuse/core': 9.13.0(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
       async-validator: 4.2.5
       dayjs: 1.11.10
       escape-html: 1.0.3
@@ -11819,7 +11901,7 @@ snapshots:
 
   universalify@2.0.0: {}
 
-  unplugin-auto-import@0.12.0(@vueuse/core@10.9.0(vue@3.4.27(typescript@5.4.2)))(rollup@2.25.0):
+  unplugin-auto-import@0.12.0(@vueuse/core@10.9.0(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2)))(rollup@2.25.0):
     dependencies:
       '@antfu/utils': 0.7.2
       '@rollup/pluginutils': 5.0.2(rollup@2.25.0)
@@ -11828,7 +11910,7 @@ snapshots:
       unimport: 1.3.0(rollup@2.25.0)
       unplugin: 1.3.1
     optionalDependencies:
-      '@vueuse/core': 10.9.0(vue@3.4.27(typescript@5.4.2))
+      '@vueuse/core': 10.9.0(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
     transitivePeerDependencies:
       - rollup
 
@@ -11934,7 +12016,7 @@ snapshots:
       sass: 1.77.0
       terser: 5.31.0
 
-  vitepress@1.1.4(@algolia/client-search@4.9.1)(@types/node@18.19.3)(@types/react@17.0.37)(async-validator@4.2.5)(axios@0.25.0)(postcss@8.4.38)(qrcode@1.5.0)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)(sass@1.77.0)(search-insights@2.9.0)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.2):
+  vitepress@1.1.4(@algolia/client-search@4.9.1)(@types/node@18.19.3)(@types/react@17.0.37)(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(async-validator@4.2.5)(axios@0.25.0)(postcss@8.4.38)(qrcode@1.5.0)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)(sass@1.77.0)(search-insights@2.9.0)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.2):
     dependencies:
       '@docsearch/css': 3.6.0
       '@docsearch/js': 3.6.0(@algolia/client-search@4.9.1)(@types/react@17.0.37)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)(search-insights@2.9.0)
@@ -11943,8 +12025,8 @@ snapshots:
       '@types/markdown-it': 14.1.1
       '@vitejs/plugin-vue': 5.0.4(vite@5.2.11(@types/node@18.19.3)(sass@1.77.0)(terser@5.31.0))(vue@3.4.27(typescript@5.4.2))
       '@vue/devtools-api': 7.1.3(vue@3.4.27(typescript@5.4.2))
-      '@vueuse/core': 10.9.0(vue@3.4.27(typescript@5.4.2))
-      '@vueuse/integrations': 10.9.0(async-validator@4.2.5)(axios@0.25.0)(focus-trap@7.5.4)(qrcode@1.5.0)(sortablejs@1.15.2)(vue@3.4.27(typescript@5.4.2))
+      '@vueuse/core': 10.9.0(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2))
+      '@vueuse/integrations': 10.9.0(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(async-validator@4.2.5)(axios@0.25.0)(focus-trap@7.5.4)(qrcode@1.5.0)(sortablejs@1.15.2)(vue@3.4.27(typescript@5.4.2))
       focus-trap: 7.5.4
       mark.js: 8.11.1
       minisearch: 6.3.0
@@ -12016,13 +12098,17 @@ snapshots:
 
   vue-component-type-helpers@2.0.16: {}
 
-  vue-demi@0.14.6(vue@3.4.27(typescript@5.4.2)):
+  vue-demi@0.14.7(@vue/composition-api@1.7.2(vue@2.7.4))(vue@2.7.4):
     dependencies:
-      vue: 3.4.27(typescript@5.4.2)
+      vue: 2.7.4
+    optionalDependencies:
+      '@vue/composition-api': 1.7.2(vue@2.7.4)
 
-  vue-demi@0.14.7(vue@3.4.27(typescript@5.4.2)):
+  vue-demi@0.14.7(@vue/composition-api@1.7.2(vue@3.4.27(typescript@5.4.2)))(vue@3.4.27(typescript@5.4.2)):
     dependencies:
       vue: 3.4.27(typescript@5.4.2)
+    optionalDependencies:
+      '@vue/composition-api': 1.7.2(vue@3.4.27(typescript@5.4.2))
 
   vue-eslint-parser@9.1.1(eslint@8.38.0):
     dependencies:
diff --git a/runtime/vue-runtime-help/package.json b/runtime/vue-runtime-help/package.json
new file mode 100644
index 00000000..01c8fed4
--- /dev/null
+++ b/runtime/vue-runtime-help/package.json
@@ -0,0 +1,50 @@
+{
+  "version": "0.0.2",
+  "name": "@tmagic/vue-runtime-help",
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./*": "./*"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "pnpm clean && tsc -b tsconfig.build.json",
+    "clean": "rimraf dist *.tsbuildinfo",
+    "check:type": "tsc --noEmit --project tsconfig.build.json"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "dependencies": {
+    "@tmagic/stage": "workspace:*",
+    "vue-demi": "^0.14.7"
+  },
+  "peerDependencies": {
+    "@tmagic/core": "workspace:*",
+    "@tmagic/data-source": "workspace:*",
+    "@tmagic/schema": "workspace:*",
+    "@tmagic/utils": "workspace:*",
+    "@vue/composition-api": ">=1.7.2",
+    "vue": ">=2.0.0 || >=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^18.19.0",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.4.2"
+  }
+}
\ No newline at end of file
diff --git a/runtime/vue-runtime-help/src/hooks/use-dsl.ts b/runtime/vue-runtime-help/src/hooks/use-dsl.ts
new file mode 100644
index 00000000..e15b5aae
--- /dev/null
+++ b/runtime/vue-runtime-help/src/hooks/use-dsl.ts
@@ -0,0 +1,31 @@
+import { inject, nextTick, reactive, ref } from 'vue-demi';
+
+import Core from '@tmagic/core';
+import type { ChangeEvent } from '@tmagic/data-source';
+import type { MNode } from '@tmagic/schema';
+import { isPage, replaceChildNode } from '@tmagic/utils';
+
+export const useDsl = () => {
+  const app = inject<Core | undefined>('app');
+  const pageConfig = ref(app?.page?.data || {});
+
+  app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {
+    nodes.forEach((node) => {
+      if (isPage(node)) {
+        pageConfig.value = node;
+      } else {
+        replaceChildNode(reactive(node), [pageConfig.value as MNode]);
+      }
+    });
+
+    if (!app) return;
+
+    nextTick(() => {
+      app.emit('replaced-node', { nodes, sourceId, ...changeEvent });
+    });
+  });
+
+  return {
+    pageConfig,
+  };
+};
diff --git a/runtime/vue-runtime-help/src/hooks/use-editor-dsl.ts b/runtime/vue-runtime-help/src/hooks/use-editor-dsl.ts
new file mode 100644
index 00000000..e511e215
--- /dev/null
+++ b/runtime/vue-runtime-help/src/hooks/use-editor-dsl.ts
@@ -0,0 +1,120 @@
+import { computed, inject, nextTick, reactive, ref, watch } from 'vue-demi';
+
+import Core from '@tmagic/core';
+import type { Id, MApp, MNode } from '@tmagic/schema';
+import type { Magic, RemoveData, UpdateData } from '@tmagic/stage';
+import { getNodePath, replaceChildNode } from '@tmagic/utils';
+
+declare global {
+  interface Window {
+    magic?: Magic;
+  }
+}
+
+export const useEditorDsl = (win = window) => {
+  const app = inject<Core | undefined>('app');
+
+  const root = ref<MApp>();
+  const curPageId = ref<Id>();
+  const selectedId = ref<Id>();
+
+  const pageConfig = computed(
+    () => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],
+  );
+
+  watch(pageConfig, async () => {
+    await nextTick();
+    const page = document.querySelector<HTMLElement>('.magic-ui-page');
+    page && win.magic?.onPageElUpdate(page);
+  });
+
+  win.magic?.onRuntimeReady({
+    getApp() {
+      return app;
+    },
+
+    updateRootConfig(config: MApp) {
+      root.value = config;
+      app?.setConfig(config, curPageId.value);
+    },
+
+    updatePageId(id: Id) {
+      curPageId.value = id;
+      app?.setPage(id);
+    },
+
+    select(id: Id) {
+      selectedId.value = id;
+
+      if (app?.getPage(id)) {
+        this.updatePageId?.(id);
+      }
+
+      const el = document.getElementById(`${id}`);
+      if (el) return el;
+      // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
+      return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
+    },
+
+    add({ config, parentId }: UpdateData) {
+      if (!root.value) throw new Error('error');
+      if (!selectedId.value) throw new Error('error');
+      if (!parentId) throw new Error('error');
+
+      const parent = getNodePath(parentId, [root.value]).pop();
+      if (!parent) throw new Error('未找到父节点');
+
+      if (config.type !== 'page') {
+        const parentNode = app?.page?.getNode(parent.id);
+        parentNode && app?.page?.initNode(config, parentNode);
+      }
+
+      if (parent.id !== selectedId.value) {
+        const index = parent.items?.findIndex((child: MNode) => child.id === selectedId.value);
+        parent.items?.splice(index + 1, 0, config);
+      } else {
+        // 新增节点添加到配置中
+        parent.items?.push(config);
+      }
+    },
+
+    update({ config, parentId }: UpdateData) {
+      if (!root.value || !app) throw new Error('error');
+
+      const newNode = app.dataSourceManager?.compiledNode(config, undefined, true) || config;
+      replaceChildNode(reactive(newNode), [root.value], parentId);
+
+      const nodeInstance = app.page?.getNode(config.id);
+      if (nodeInstance) {
+        nodeInstance.setData(newNode);
+      }
+
+      if (app.page?.data.id === config.id) {
+        app.page.setData(newNode);
+      }
+    },
+
+    remove({ id, parentId }: RemoveData) {
+      if (!root.value) throw new Error('error');
+
+      const node = getNodePath(id, [root.value]).pop();
+      if (!node) throw new Error('未找到目标元素');
+
+      const parent = getNodePath(parentId, [root.value]).pop();
+      if (!parent) throw new Error('未找到父元素');
+
+      if (node.type === 'page') {
+        app?.deletePage();
+      } else {
+        app?.page?.deleteNode(node.id);
+      }
+
+      const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
+      parent.items.splice(index, 1);
+    },
+  });
+
+  return {
+    pageConfig,
+  };
+};
diff --git a/runtime/vue-runtime-help/src/index.ts b/runtime/vue-runtime-help/src/index.ts
new file mode 100644
index 00000000..6bb48c2e
--- /dev/null
+++ b/runtime/vue-runtime-help/src/index.ts
@@ -0,0 +1,2 @@
+export * from './hooks/use-editor-dsl';
+export * from './hooks/use-dsl';
diff --git a/runtime/vue-runtime-help/tsconfig.build.json b/runtime/vue-runtime-help/tsconfig.build.json
new file mode 100644
index 00000000..250b6831
--- /dev/null
+++ b/runtime/vue-runtime-help/tsconfig.build.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "declaration": true,
+    "sourceMap": false
+  },
+  "include": ["./src"],
+}
diff --git a/runtime/vue-runtime-help/tsconfig.json b/runtime/vue-runtime-help/tsconfig.json
new file mode 100644
index 00000000..5252874b
--- /dev/null
+++ b/runtime/vue-runtime-help/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+  },
+}
diff --git a/runtime/vue2/package.json b/runtime/vue2/package.json
index e0d64f06..b61fe35a 100644
--- a/runtime/vue2/package.json
+++ b/runtime/vue2/package.json
@@ -24,8 +24,8 @@
     "@tmagic/data-source": "1.4.5",
     "@tmagic/ui-vue2": "1.4.5",
     "@tmagic/schema": "1.4.5",
-    "@tmagic/stage": "1.4.5",
     "@tmagic/utils": "1.4.5",
+    "@tmagic/vue-runtime-help": "^0.0.2",
     "axios": "^0.25.0",
     "terser": "^5.31.0",
     "vue": "^2.7.4"
diff --git a/runtime/vue2/page/App.vue b/runtime/vue2/page/App.vue
index 27bd78ab..909f2070 100644
--- a/runtime/vue2/page/App.vue
+++ b/runtime/vue2/page/App.vue
@@ -3,20 +3,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, nextTick, reactive, ref } from 'vue';
+import { defineComponent } from 'vue';
 
 import type { Page } from '@tmagic/core';
 import Core from '@tmagic/core';
-import type { ChangeEvent } from '@tmagic/data-source';
-import type { MNode } from '@tmagic/schema';
-import { addParamToUrl, isPage, replaceChildNode } from '@tmagic/utils';
+import { addParamToUrl } from '@tmagic/utils';
+import { useDsl } from '@tmagic/vue-runtime-help';
 
 export default defineComponent({
   name: 'App',
 
   setup() {
+    const { pageConfig } = useDsl();
+
     const app = inject<Core | undefined>('app');
-    const pageConfig = ref(app?.page?.data || {});
 
     app?.on('page-change', (page?: Page) => {
       if (!page) {
@@ -25,22 +25,6 @@ export default defineComponent({
       addParamToUrl({ page: page.data.id }, window);
     });
 
-    app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {
-      nodes.forEach((node) => {
-        if (isPage(node)) {
-          pageConfig.value = node;
-        } else {
-          replaceChildNode(reactive(node), [pageConfig.value as MNode]);
-        }
-      });
-
-      if (!app) return;
-
-      nextTick(() => {
-        app.emit('replaced-node', { nodes, sourceId, ...changeEvent });
-      });
-    });
-
     return {
       pageConfig,
     };
diff --git a/runtime/vue2/page/main.ts b/runtime/vue2/page/main.ts
index 2b220ad0..ff398a78 100644
--- a/runtime/vue2/page/main.ts
+++ b/runtime/vue2/page/main.ts
@@ -19,14 +19,14 @@
 import Vue from 'vue';
 
 import Core from '@tmagic/core';
-import { DataSourceManager } from '@tmagic/data-source';
+import { DataSourceManager, registerDataSourceOnDemand } from '@tmagic/data-source';
 import { getUrlParam } from '@tmagic/utils';
 
+import asyncDataSources from '../.tmagic/async-datasource-entry';
 import components from '../.tmagic/comp-entry';
-import dataSources from '../.tmagic/datasource-entry';
 import plugins from '../.tmagic/plugin-entry';
 
-import request from './utils/request';
+import request, { service } from './utils/request';
 import AppComponent from './App.vue';
 import { getLocalConfig } from './utils';
 
@@ -34,35 +34,40 @@ import '@tmagic/utils/resetcss.css';
 
 Vue.use(request);
 
-Object.keys(components).forEach((type: string) => {
-  Vue.component(`magic-ui-${type}`, components[type]);
-});
-
-Object.entries(dataSources).forEach(([type, ds]: [string, any]) => {
-  DataSourceManager.register(type, ds);
-});
-
-Object.values(plugins).forEach((plugin: any) => {
-  Vue.use(plugin);
-});
+const dsl = ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {};
 
 const app = new Core({
   ua: window.navigator.userAgent,
-  config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {},
+  config: dsl,
+  request: service,
   curPage: getUrlParam('page'),
   useMock: Boolean(getUrlParam('useMock')),
 });
 
 app.setDesignWidth(app.env.isWeb ? window.document.documentElement.getBoundingClientRect().width : 375);
 
-Vue.prototype.app = app;
-
-const magicApp = new Vue({
-  provide: {
-    app,
-  },
-
-  render: (h) => h(AppComponent),
+Object.keys(components).forEach((type: string) => {
+  Vue.component(`magic-ui-${type}`, components[type]);
 });
 
-magicApp.$mount('#app');
+Object.values(plugins).forEach((plugin: any) => {
+  Vue.use(plugin, { app });
+});
+
+registerDataSourceOnDemand(dsl, asyncDataSources).then((dataSources) => {
+  Object.entries(dataSources).forEach(([type, ds]: [string, any]) => {
+    DataSourceManager.register(type, ds);
+  });
+
+  Vue.prototype.app = app;
+
+  const vueApp = new Vue({
+    provide: {
+      app,
+    },
+
+    render: (h) => h(AppComponent),
+  });
+
+  vueApp.$mount('#app');
+});
diff --git a/runtime/vue2/page/utils/request.ts b/runtime/vue2/page/utils/request.ts
index 9cd9620b..c7a51522 100644
--- a/runtime/vue2/page/utils/request.ts
+++ b/runtime/vue2/page/utils/request.ts
@@ -18,11 +18,6 @@
 
 import axios, { AxiosResponse } from 'axios';
 
-const service = axios.create({
-  withCredentials: true,
-  timeout: 7000,
-});
-
 const requestHandler = function (config: Record<any, any>) {
   return config;
 };
@@ -31,6 +26,11 @@ const responseHandler = function (response: AxiosResponse) {
   return response;
 };
 
+export const service = axios.create({
+  withCredentials: true,
+  timeout: 7000,
+});
+
 service.interceptors.request.use(requestHandler);
 service.interceptors.response.use(responseHandler);
 
diff --git a/runtime/vue2/playground/App.vue b/runtime/vue2/playground/App.vue
index 2231b43c..f4302807 100644
--- a/runtime/vue2/playground/App.vue
+++ b/runtime/vue2/playground/App.vue
@@ -3,13 +3,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, nextTick, reactive, ref, watch } from 'vue';
-
-import Core from '@tmagic/core';
-import type { Id, MApp, MNode } from '@tmagic/schema';
-import { Magic, RemoveData, UpdateData } from '@tmagic/stage';
-import { getNodePath, replaceChildNode } from '@tmagic/utils';
+import { defineComponent } from 'vue';
 
+import { useEditorDsl } from '@tmagic/vue-runtime-help';
 declare global {
   interface Window {
     magic: Magic;
@@ -19,107 +15,7 @@ declare global {
 
 export default defineComponent({
   setup() {
-    const app = inject<Core | undefined>('app');
-
-    const root = ref<MApp>();
-    const curPageId = ref<Id>();
-    const selectedId = ref<Id>();
-
-    const pageConfig = computed(
-      () => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],
-    );
-
-    watch(pageConfig, async () => {
-      await nextTick();
-      const page = document.querySelector<HTMLElement>('.magic-ui-page');
-      page && window.magic.onPageElUpdate(page);
-    });
-
-    window.magic?.onRuntimeReady({
-      getApp() {
-        return app;
-      },
-
-      updateRootConfig(config: MApp) {
-        root.value = config;
-        app?.setConfig(config, curPageId.value);
-      },
-
-      updatePageId(id: Id) {
-        curPageId.value = id;
-        app?.setPage(id);
-      },
-
-      select(id: Id) {
-        selectedId.value = id;
-
-        if (app?.getPage(id)) {
-          this.updatePageId?.(id);
-        }
-
-        const el = document.getElementById(`${id}`);
-        if (el) return el;
-        // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
-        return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
-      },
-
-      add({ config, parentId }: UpdateData) {
-        if (!root.value) throw new Error('error');
-        if (!selectedId.value) throw new Error('error');
-        if (!parentId) throw new Error('error');
-
-        const parent = getNodePath(parentId, [root.value]).pop();
-        if (!parent) throw new Error('未找到父节点');
-
-        if (config.type !== 'page') {
-          const parentNode = app?.page?.getNode(parent.id);
-          parentNode && app?.page?.initNode(config, parentNode);
-        }
-
-        if (parent.id !== selectedId.value) {
-          const index = parent.items?.findIndex((child: MNode) => child.id === selectedId.value);
-          parent.items?.splice(index + 1, 0, config);
-        } else {
-          // 新增节点添加到配置中
-          parent.items?.push(config);
-        }
-      },
-
-      update({ config, parentId }: UpdateData) {
-        if (!root.value || !app) throw new Error('error');
-
-        const newNode = app.dataSourceManager?.compiledNode(config, undefined, true) || config;
-        replaceChildNode(reactive(newNode), [root.value], parentId);
-
-        const nodeInstance = app.page?.getNode(config.id);
-        if (nodeInstance) {
-          nodeInstance.setData(newNode);
-        }
-
-        if (app.page?.data.id === config.id) {
-          app.page.setData(newNode);
-        }
-      },
-
-      remove({ id, parentId }: RemoveData) {
-        if (!root.value) throw new Error('error');
-
-        const node = getNodePath(id, [root.value]).pop();
-        if (!node) throw new Error('未找到目标元素');
-
-        const parent = getNodePath(parentId, [root.value]).pop();
-        if (!parent) throw new Error('未找到父元素');
-
-        if (node.type === 'page') {
-          app?.deletePage();
-        } else {
-          app?.page?.deleteNode(node.id);
-        }
-
-        const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
-        parent.items.splice(index, 1);
-      },
-    });
+    const { pageConfig } = useEditorDsl();
 
     return {
       pageConfig,
diff --git a/runtime/vue2/playground/main.ts b/runtime/vue2/playground/main.ts
index 6ea7505b..2d52d840 100644
--- a/runtime/vue2/playground/main.ts
+++ b/runtime/vue2/playground/main.ts
@@ -30,6 +30,15 @@ Promise.all([
   import('../.tmagic/plugin-entry'),
   import('../.tmagic/datasource-entry'),
 ]).then(([components, plugins, dataSources]) => {
+  const app = new Core({
+    ua: window.navigator.userAgent,
+    platform: 'editor',
+  });
+
+  if (app.env.isWeb) {
+    app.setDesignWidth(window.document.documentElement.getBoundingClientRect().width);
+  }
+
   Object.entries(components.default).forEach(([type, component]: [string, any]) => {
     Vue.component(`magic-ui-${type}`, component);
   });
@@ -39,18 +48,9 @@ Promise.all([
   });
 
   Object.values(plugins.default).forEach((plugin: any) => {
-    Vue.use(plugin);
+    Vue.use(plugin, { app });
   });
 
-  const app = new Core({
-    ua: window.navigator.userAgent,
-    platform: 'editor',
-  });
-
-  if (app.env.isWeb) {
-    app.setDesignWidth(window.document.documentElement.getBoundingClientRect().width);
-  }
-
   window.appInstance = app;
 
   Vue.prototype.app = app;
diff --git a/runtime/vue2/tmagic.config.ts b/runtime/vue2/tmagic.config.ts
index c1701203..a25d5bbf 100644
--- a/runtime/vue2/tmagic.config.ts
+++ b/runtime/vue2/tmagic.config.ts
@@ -5,4 +5,5 @@ import { defineConfig } from '@tmagic/cli';
 export default defineConfig({
   packages: [path.join(__dirname, '../../packages/ui-vue2')],
   componentFileAffix: '.vue',
+  dynamicImport: true,
 });
diff --git a/runtime/vue3/dev.vite.config.ts b/runtime/vue3/dev.vite.config.ts
index 5aa788ea..5544f46b 100644
--- a/runtime/vue3/dev.vite.config.ts
+++ b/runtime/vue3/dev.vite.config.ts
@@ -38,6 +38,7 @@ export default defineConfig({
       { find: /^@tmagic\/dep/, replacement: path.join(__dirname, '../../packages/dep/src/index.ts') },
       { find: /^@data-source/, replacement: path.join(__dirname, '../../packages/data-source/src') },
       { find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },
+      { find: /^@tmagic\/vue-runtime-help/, replacement: path.join(__dirname, '../vue-runtime-help/src/index.ts') },
     ],
   },
 
diff --git a/runtime/vue3/package.json b/runtime/vue3/package.json
index a6f314bf..841ffaa9 100644
--- a/runtime/vue3/package.json
+++ b/runtime/vue3/package.json
@@ -18,17 +18,17 @@
     "build:ds:event": "vite build --config build.vite.config.ts --mode ds:event"
   },
   "dependencies": {
-    "@tmagic/cli": "1.4.5",
     "@tmagic/data-source": "1.4.5",
     "@tmagic/core": "1.4.5",
     "@tmagic/ui": "1.4.5",
     "@tmagic/schema": "1.4.5",
-    "@tmagic/stage": "1.4.5",
     "@tmagic/utils": "1.4.5",
+    "@tmagic/vue-runtime-help": "^0.0.2",
     "axios": "^0.25.0",
     "vue": "^3.4.27"
   },
   "devDependencies": {
+    "@tmagic/cli": "1.4.5",
     "@types/node": "^18.19.0",
     "@vitejs/plugin-legacy": "^5.4.0",
     "@vitejs/plugin-vue": "^5.0.4",
diff --git a/runtime/vue3/page/App.vue b/runtime/vue3/page/App.vue
index 27bd78ab..76860159 100644
--- a/runtime/vue3/page/App.vue
+++ b/runtime/vue3/page/App.vue
@@ -2,48 +2,20 @@
   <magic-ui-page :config="pageConfig"></magic-ui-page>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, nextTick, reactive, ref } from 'vue';
-
+<script lang="ts" setup>
 import type { Page } from '@tmagic/core';
 import Core from '@tmagic/core';
-import type { ChangeEvent } from '@tmagic/data-source';
-import type { MNode } from '@tmagic/schema';
-import { addParamToUrl, isPage, replaceChildNode } from '@tmagic/utils';
+import { addParamToUrl } from '@tmagic/utils';
+import { useDsl } from '@tmagic/vue-runtime-help';
 
-export default defineComponent({
-  name: 'App',
+const { pageConfig } = useDsl();
 
-  setup() {
-    const app = inject<Core | undefined>('app');
-    const pageConfig = ref(app?.page?.data || {});
+const app = inject<Core | undefined>('app');
 
-    app?.on('page-change', (page?: Page) => {
-      if (!page) {
-        throw new Error(`页面不存在`);
-      }
-      addParamToUrl({ page: page.data.id }, window);
-    });
-
-    app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {
-      nodes.forEach((node) => {
-        if (isPage(node)) {
-          pageConfig.value = node;
-        } else {
-          replaceChildNode(reactive(node), [pageConfig.value as MNode]);
-        }
-      });
-
-      if (!app) return;
-
-      nextTick(() => {
-        app.emit('replaced-node', { nodes, sourceId, ...changeEvent });
-      });
-    });
-
-    return {
-      pageConfig,
-    };
-  },
+app?.on('page-change', (page?: Page) => {
+  if (!page) {
+    throw new Error(`页面不存在`);
+  }
+  addParamToUrl({ page: page.data.id }, window);
 });
 </script>
diff --git a/runtime/vue3/page/main.ts b/runtime/vue3/page/main.ts
index 06a2c8cc..7bb5c3c3 100644
--- a/runtime/vue3/page/main.ts
+++ b/runtime/vue3/page/main.ts
@@ -26,42 +26,43 @@ import components from '../.tmagic/async-comp-entry';
 import asyncDataSources from '../.tmagic/async-datasource-entry';
 import plugins from '../.tmagic/plugin-entry';
 
-import request from './utils/request';
+import request, { service } from './utils/request';
 import AppComponent from './App.vue';
 import { getLocalConfig } from './utils';
 
 import '@tmagic/utils/resetcss.css';
 
-const magicApp = createApp(AppComponent);
+const vueApp = createApp(AppComponent);
 
-magicApp.use(request);
+vueApp.use(request);
+
+const dsl = ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {};
+
+const app = new Core({
+  ua: window.navigator.userAgent,
+  config: dsl,
+  request: service,
+  curPage: getUrlParam('page'),
+  useMock: Boolean(getUrlParam('useMock')),
+});
+
+app.setDesignWidth(app.env.isWeb ? window.document.documentElement.getBoundingClientRect().width : 375);
 
 Object.entries(components).forEach(([type, component]: [string, any]) => {
-  magicApp.component(`magic-ui-${type}`, defineAsyncComponent(component));
+  vueApp.component(`magic-ui-${type}`, defineAsyncComponent(component));
 });
 
 Object.values(plugins).forEach((plugin: any) => {
-  magicApp.use(plugin);
+  vueApp.use(plugin, { app });
 });
 
-const dsl = ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {};
-
 registerDataSourceOnDemand(dsl, asyncDataSources).then((dataSources) => {
   Object.entries(dataSources).forEach(([type, ds]: [string, any]) => {
     DataSourceManager.register(type, ds);
   });
 
-  const app = new Core({
-    ua: window.navigator.userAgent,
-    config: dsl,
-    curPage: getUrlParam('page'),
-    useMock: Boolean(getUrlParam('useMock')),
-  });
+  vueApp.config.globalProperties.app = app;
+  vueApp.provide('app', app);
 
-  app.setDesignWidth(app.env.isWeb ? window.document.documentElement.getBoundingClientRect().width : 375);
-
-  magicApp.config.globalProperties.app = app;
-  magicApp.provide('app', app);
-
-  magicApp.mount('#app');
+  vueApp.mount('#app');
 });
diff --git a/runtime/vue3/page/utils/request.ts b/runtime/vue3/page/utils/request.ts
index 4fde3845..1652d768 100644
--- a/runtime/vue3/page/utils/request.ts
+++ b/runtime/vue3/page/utils/request.ts
@@ -19,11 +19,6 @@
 import { App } from 'vue';
 import axios, { AxiosResponse } from 'axios';
 
-const service = axios.create({
-  withCredentials: true,
-  timeout: 7000,
-});
-
 const requestHandler = function (config: Record<any, any>) {
   return config;
 };
@@ -32,6 +27,11 @@ const responseHandler = function (response: AxiosResponse) {
   return response;
 };
 
+export const service = axios.create({
+  withCredentials: true,
+  timeout: 7000,
+});
+
 service.interceptors.request.use(requestHandler);
 service.interceptors.response.use(responseHandler);
 
diff --git a/runtime/vue3/playground/App.vue b/runtime/vue3/playground/App.vue
index e073d464..89ec96b4 100644
--- a/runtime/vue3/playground/App.vue
+++ b/runtime/vue3/playground/App.vue
@@ -3,118 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, nextTick, reactive, ref, watch } from 'vue';
+import { useEditorDsl } from '@tmagic/vue-runtime-help';
 
-import Core from '@tmagic/core';
-import type { Id, MApp, MNode } from '@tmagic/schema';
-import { Magic, RemoveData, UpdateData } from '@tmagic/stage';
-import { getNodePath, replaceChildNode } from '@tmagic/utils';
-
-declare global {
-  interface Window {
-    magic: Magic;
-  }
-}
-
-const app = inject<Core | undefined>('app');
-
-const root = ref<MApp>();
-const curPageId = ref<Id>();
-const selectedId = ref<Id>();
-
-const pageConfig = computed(
-  () => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],
-);
-
-watch(pageConfig, async () => {
-  await nextTick();
-  const page = document.querySelector<HTMLElement>('.magic-ui-page');
-  page && window.magic.onPageElUpdate(page);
-});
-
-window.magic?.onRuntimeReady({
-  getApp() {
-    return app;
-  },
-
-  updateRootConfig(config: MApp) {
-    root.value = config;
-    app?.setConfig(config, curPageId.value);
-  },
-
-  updatePageId(id: Id) {
-    curPageId.value = id;
-    app?.setPage(id);
-  },
-
-  select(id: Id) {
-    selectedId.value = id;
-
-    if (app?.getPage(id)) {
-      this.updatePageId?.(id);
-    }
-
-    const el = document.getElementById(`${id}`);
-    if (el) return el;
-    // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
-    return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
-  },
-
-  add({ config, parentId }: UpdateData) {
-    if (!root.value) throw new Error('error');
-    if (!selectedId.value) throw new Error('error');
-    if (!parentId) throw new Error('error');
-
-    const parent = getNodePath(parentId, [root.value]).pop();
-    if (!parent) throw new Error('未找到父节点');
-
-    if (config.type !== 'page') {
-      const parentNode = app?.page?.getNode(parent.id);
-      parentNode && app?.page?.initNode(config, parentNode);
-    }
-
-    if (parent.id !== selectedId.value) {
-      const index = parent.items?.findIndex((child: MNode) => child.id === selectedId.value);
-      parent.items?.splice(index + 1, 0, config);
-    } else {
-      // 新增节点添加到配置中
-      parent.items?.push(config);
-    }
-  },
-
-  update({ config, parentId }: UpdateData) {
-    if (!root.value || !app) throw new Error('error');
-
-    const newNode = app.dataSourceManager?.compiledNode(config, undefined, true) || config;
-    replaceChildNode(reactive(newNode), [root.value], parentId);
-
-    const nodeInstance = app.page?.getNode(config.id);
-    if (nodeInstance) {
-      nodeInstance.setData(newNode);
-    }
-
-    if (app.page?.data.id === config.id) {
-      app.page.setData(newNode);
-    }
-  },
-
-  remove({ id, parentId }: RemoveData) {
-    if (!root.value) throw new Error('error');
-
-    const node = getNodePath(id, [root.value]).pop();
-    if (!node) throw new Error('未找到目标元素');
-
-    const parent = getNodePath(parentId, [root.value]).pop();
-    if (!parent) throw new Error('未找到父元素');
-
-    if (node.type === 'page') {
-      app?.deletePage();
-    } else {
-      app?.page?.deleteNode(node.id);
-    }
-
-    const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
-    parent.items.splice(index, 1);
-  },
-});
+const { pageConfig } = useEditorDsl();
 </script>
diff --git a/runtime/vue3/playground/main.ts b/runtime/vue3/playground/main.ts
index 9c8d60f6..0fd4d2dd 100644
--- a/runtime/vue3/playground/main.ts
+++ b/runtime/vue3/playground/main.ts
@@ -30,19 +30,7 @@ Promise.all([
   import('../.tmagic/plugin-entry'),
   import('../.tmagic/datasource-entry'),
 ]).then(([components, plugins, dataSources]) => {
-  const magicApp = createApp(App);
-
-  Object.entries(components.default).forEach(([type, component]: [string, any]) => {
-    magicApp.component(`magic-ui-${type}`, component);
-  });
-
-  Object.entries(dataSources.default).forEach(([type, ds]: [string, any]) => {
-    DataSourceManager.register(type, ds);
-  });
-
-  Object.values(plugins.default).forEach((plugin: any) => {
-    magicApp.use(plugin);
-  });
+  const vueApp = createApp(App);
 
   const app = new Core({
     ua: window.navigator.userAgent,
@@ -53,9 +41,21 @@ Promise.all([
     app.setDesignWidth(window.document.documentElement.getBoundingClientRect().width);
   }
 
-  window.appInstance = app;
-  magicApp.config.globalProperties.app = app;
-  magicApp.provide('app', app);
+  Object.entries(components.default).forEach(([type, component]: [string, any]) => {
+    vueApp.component(`magic-ui-${type}`, component);
+  });
 
-  magicApp.mount('#app');
+  Object.entries(dataSources.default).forEach(([type, ds]: [string, any]) => {
+    DataSourceManager.register(type, ds);
+  });
+
+  Object.values(plugins.default).forEach((plugin: any) => {
+    vueApp.use(plugin, { app });
+  });
+
+  window.appInstance = app;
+  vueApp.config.globalProperties.app = app;
+  vueApp.provide('app', app);
+
+  vueApp.mount('#app');
 });