diff --git a/packages/design/package.json b/packages/design/package.json
index 561cb890..9b212d22 100644
--- a/packages/design/package.json
+++ b/packages/design/package.json
@@ -48,6 +48,7 @@
     "rimraf": "^3.0.2",
     "typescript": "^4.7.4",
     "vite": "^3.1.3",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^1.0.8"
   }
 }
diff --git a/packages/design/src/Button.vue b/packages/design/src/Button.vue
index 3afa6680..0d266dc6 100644
--- a/packages/design/src/Button.vue
+++ b/packages/design/src/Button.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMButton">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Card.vue b/packages/design/src/Card.vue
index 9503776e..eda48465 100644
--- a/packages/design/src/Card.vue
+++ b/packages/design/src/Card.vue
@@ -8,7 +8,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMCard">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Cascader.vue b/packages/design/src/Cascader.vue
index a76d0d15..8b1234d8 100644
--- a/packages/design/src/Cascader.vue
+++ b/packages/design/src/Cascader.vue
@@ -8,7 +8,7 @@
   ></component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMCascader">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Checkbox.vue b/packages/design/src/Checkbox.vue
index 19044d4d..69a38846 100644
--- a/packages/design/src/Checkbox.vue
+++ b/packages/design/src/Checkbox.vue
@@ -6,7 +6,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMCheckbox">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/CheckboxGroup.vue b/packages/design/src/CheckboxGroup.vue
index 4a1a7818..ed6dae73 100644
--- a/packages/design/src/CheckboxGroup.vue
+++ b/packages/design/src/CheckboxGroup.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMCheckboxGroup">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Col.vue b/packages/design/src/Col.vue
index b13c605c..02ea889b 100644
--- a/packages/design/src/Col.vue
+++ b/packages/design/src/Col.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMCol">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Collapse.vue b/packages/design/src/Collapse.vue
index 8a145d04..829ee821 100644
--- a/packages/design/src/Collapse.vue
+++ b/packages/design/src/Collapse.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMCollapse">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/CollapseItem.vue b/packages/design/src/CollapseItem.vue
index f2b3b111..008cead1 100644
--- a/packages/design/src/CollapseItem.vue
+++ b/packages/design/src/CollapseItem.vue
@@ -7,7 +7,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMCollapseItem">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/ColorPicker.vue b/packages/design/src/ColorPicker.vue
index e0cea6a7..3ccc31aa 100644
--- a/packages/design/src/ColorPicker.vue
+++ b/packages/design/src/ColorPicker.vue
@@ -3,7 +3,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMColorPicker">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/DatePicker.vue b/packages/design/src/DatePicker.vue
index 4ed4cb04..07a6b478 100644
--- a/packages/design/src/DatePicker.vue
+++ b/packages/design/src/DatePicker.vue
@@ -3,7 +3,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMDatePicker">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Dialog.vue b/packages/design/src/Dialog.vue
index 09c246e0..703b6b11 100644
--- a/packages/design/src/Dialog.vue
+++ b/packages/design/src/Dialog.vue
@@ -8,7 +8,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMDialog">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Divider.vue b/packages/design/src/Divider.vue
index 0d3da3ff..ec723604 100644
--- a/packages/design/src/Divider.vue
+++ b/packages/design/src/Divider.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMDivider">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Dropdown.vue b/packages/design/src/Dropdown.vue
index 3e45f512..1b6dc184 100644
--- a/packages/design/src/Dropdown.vue
+++ b/packages/design/src/Dropdown.vue
@@ -8,7 +8,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMDropdown">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/DropdownItem.vue b/packages/design/src/DropdownItem.vue
index faf1b6b4..1700b2f6 100644
--- a/packages/design/src/DropdownItem.vue
+++ b/packages/design/src/DropdownItem.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMDropdownItem">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/DropdownMenu.vue b/packages/design/src/DropdownMenu.vue
index 18a22968..9bcc1b71 100644
--- a/packages/design/src/DropdownMenu.vue
+++ b/packages/design/src/DropdownMenu.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMDropdownMenu">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Form.vue b/packages/design/src/Form.vue
index 3a1d0166..d407a3fb 100644
--- a/packages/design/src/Form.vue
+++ b/packages/design/src/Form.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMForm">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/FormItem.vue b/packages/design/src/FormItem.vue
index f11fec4d..6b13cacc 100644
--- a/packages/design/src/FormItem.vue
+++ b/packages/design/src/FormItem.vue
@@ -7,7 +7,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMFormItem">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Icon.vue b/packages/design/src/Icon.vue
index b454dd8a..c6d67e5d 100644
--- a/packages/design/src/Icon.vue
+++ b/packages/design/src/Icon.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMIcon">
 import { getConfig } from './config';
 
 const uiComponent = getConfig('components').icon;
diff --git a/packages/design/src/Input.vue b/packages/design/src/Input.vue
index 43c66a6a..25722495 100644
--- a/packages/design/src/Input.vue
+++ b/packages/design/src/Input.vue
@@ -15,7 +15,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMInput">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/InputNumber.vue b/packages/design/src/InputNumber.vue
index 0e1120fb..2ce6b361 100644
--- a/packages/design/src/InputNumber.vue
+++ b/packages/design/src/InputNumber.vue
@@ -8,7 +8,7 @@
   ></component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMInputNumber">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Option.vue b/packages/design/src/Option.vue
index e42e0d9e..859e6021 100644
--- a/packages/design/src/Option.vue
+++ b/packages/design/src/Option.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMOption">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/OptionGroup.vue b/packages/design/src/OptionGroup.vue
index d8cf6467..ede4a22b 100644
--- a/packages/design/src/OptionGroup.vue
+++ b/packages/design/src/OptionGroup.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMOptionGroup">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Pagination.vue b/packages/design/src/Pagination.vue
index 31a331a4..1c4e67bc 100644
--- a/packages/design/src/Pagination.vue
+++ b/packages/design/src/Pagination.vue
@@ -7,7 +7,7 @@
   ></component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMPagination">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Popover.vue b/packages/design/src/Popover.vue
index 7d67e536..cb2639ee 100644
--- a/packages/design/src/Popover.vue
+++ b/packages/design/src/Popover.vue
@@ -8,7 +8,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMPopover">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Radio.vue b/packages/design/src/Radio.vue
index cc3d7df7..605455fa 100644
--- a/packages/design/src/Radio.vue
+++ b/packages/design/src/Radio.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMRadio">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/RadioGroup.vue b/packages/design/src/RadioGroup.vue
index e5dc64f9..1e340920 100644
--- a/packages/design/src/RadioGroup.vue
+++ b/packages/design/src/RadioGroup.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMRadioGroup">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Row.vue b/packages/design/src/Row.vue
index 84e1f03d..dc1337f2 100644
--- a/packages/design/src/Row.vue
+++ b/packages/design/src/Row.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMRow">
 import { getConfig } from './config';
 
 const uiComponent = getConfig('components').row;
diff --git a/packages/design/src/Scrollbar.vue b/packages/design/src/Scrollbar.vue
index 4c659237..ef177a1c 100644
--- a/packages/design/src/Scrollbar.vue
+++ b/packages/design/src/Scrollbar.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMScrollbar">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Select.vue b/packages/design/src/Select.vue
index 7cea71c8..08eab0a4 100644
--- a/packages/design/src/Select.vue
+++ b/packages/design/src/Select.vue
@@ -11,7 +11,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMSelect">
 import { computed, onMounted, ref } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Step.vue b/packages/design/src/Step.vue
index cdff6e10..07258629 100644
--- a/packages/design/src/Step.vue
+++ b/packages/design/src/Step.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMStep">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Steps.vue b/packages/design/src/Steps.vue
index 4c2e6b06..5e3f6ef1 100644
--- a/packages/design/src/Steps.vue
+++ b/packages/design/src/Steps.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMSteps">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Switch.vue b/packages/design/src/Switch.vue
index 987b4b53..52679b24 100644
--- a/packages/design/src/Switch.vue
+++ b/packages/design/src/Switch.vue
@@ -6,7 +6,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMSwitch">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/TabPane.vue b/packages/design/src/TabPane.vue
index 818cbd95..30a64756 100644
--- a/packages/design/src/TabPane.vue
+++ b/packages/design/src/TabPane.vue
@@ -10,7 +10,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMTabPane">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Table.vue b/packages/design/src/Table.vue
index 4fc1df45..5b179d86 100644
--- a/packages/design/src/Table.vue
+++ b/packages/design/src/Table.vue
@@ -10,7 +10,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMTable">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/TableColumn.vue b/packages/design/src/TableColumn.vue
index 6ba86b86..b44b7eaf 100644
--- a/packages/design/src/TableColumn.vue
+++ b/packages/design/src/TableColumn.vue
@@ -6,7 +6,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMTableColumn">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Tabs.vue b/packages/design/src/Tabs.vue
index aaf77e61..941fd56a 100644
--- a/packages/design/src/Tabs.vue
+++ b/packages/design/src/Tabs.vue
@@ -12,7 +12,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMTabs">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Tag.vue b/packages/design/src/Tag.vue
index e2b07afc..fe8c7ca4 100644
--- a/packages/design/src/Tag.vue
+++ b/packages/design/src/Tag.vue
@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMTag">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/TimePicker.vue b/packages/design/src/TimePicker.vue
index 140f11c7..c0dcc060 100644
--- a/packages/design/src/TimePicker.vue
+++ b/packages/design/src/TimePicker.vue
@@ -3,7 +3,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMTimePicker">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Tooltip.vue b/packages/design/src/Tooltip.vue
index 7be593ad..5ee87a40 100644
--- a/packages/design/src/Tooltip.vue
+++ b/packages/design/src/Tooltip.vue
@@ -7,7 +7,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMTooltip">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Tree.vue b/packages/design/src/Tree.vue
index 861b3ec2..2c89c482 100644
--- a/packages/design/src/Tree.vue
+++ b/packages/design/src/Tree.vue
@@ -18,7 +18,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMTree">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/src/Upload.vue b/packages/design/src/Upload.vue
index d9a4db84..0740dbfc 100644
--- a/packages/design/src/Upload.vue
+++ b/packages/design/src/Upload.vue
@@ -2,7 +2,7 @@
   <component ref="upload" :is="uiComponent.component" v-bind="uiProps" @change="changeHandler"></component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMUpload">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';
diff --git a/packages/design/vite.config.ts b/packages/design/vite.config.ts
index c858b19d..e9051904 100644
--- a/packages/design/vite.config.ts
+++ b/packages/design/vite.config.ts
@@ -17,12 +17,13 @@
  */
 
 import { defineConfig } from 'vite';
+import VueSetupExtend from 'vite-plugin-vue-setup-extend';
 import vue from '@vitejs/plugin-vue';
 
 import pkg from './package.json';
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), VueSetupExtend()],
 
   optimizeDeps: {
     esbuildOptions: {
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 84fd6ed2..5d26743e 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -79,6 +79,7 @@
     "sass": "^1.35.1",
     "typescript": "^4.7.4",
     "vite": "^3.1.3",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^1.0.8"
   }
 }
diff --git a/packages/editor/src/components/ContentMenu.vue b/packages/editor/src/components/ContentMenu.vue
index 130c0177..46933773 100644
--- a/packages/editor/src/components/ContentMenu.vue
+++ b/packages/editor/src/components/ContentMenu.vue
@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorContentMenu">
 import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 
 import { MenuButton, MenuComponent } from '../type';
diff --git a/packages/editor/src/components/Icon.vue b/packages/editor/src/components/Icon.vue
index e2539beb..249fb837 100644
--- a/packages/editor/src/components/Icon.vue
+++ b/packages/editor/src/components/Icon.vue
@@ -7,7 +7,7 @@
   <TMagicIcon v-else class="magic-editor-icon"><component :is="toRaw(icon)"></component></TMagicIcon>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorIcon">
 import { toRaw } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 
diff --git a/packages/editor/src/components/ScrollBar.vue b/packages/editor/src/components/ScrollBar.vue
index 6fe3e741..195a8962 100644
--- a/packages/editor/src/components/ScrollBar.vue
+++ b/packages/editor/src/components/ScrollBar.vue
@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorScrollBar">
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import Gesto from 'gesto';
 
diff --git a/packages/editor/src/components/ScrollViewer.vue b/packages/editor/src/components/ScrollViewer.vue
index 1af42bbd..d59dcd4b 100644
--- a/packages/editor/src/components/ScrollViewer.vue
+++ b/packages/editor/src/components/ScrollViewer.vue
@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorScrollViewer">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { ScrollViewerEvent } from '../type';
diff --git a/packages/editor/src/components/ToolButton.vue b/packages/editor/src/components/ToolButton.vue
index efe6fdd6..a1a6b4f6 100644
--- a/packages/editor/src/components/ToolButton.vue
+++ b/packages/editor/src/components/ToolButton.vue
@@ -43,7 +43,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorToolButton">
 import { computed, inject } from 'vue';
 import { ArrowDown } from '@element-plus/icons-vue';
 
diff --git a/packages/editor/src/fields/Code.vue b/packages/editor/src/fields/Code.vue
index e52b5159..b1afc1f0 100644
--- a/packages/editor/src/fields/Code.vue
+++ b/packages/editor/src/fields/Code.vue
@@ -8,7 +8,7 @@
   ></magic-code-editor>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCode">
 import { computed } from 'vue';
 
 const emit = defineEmits(['change']);
diff --git a/packages/editor/src/fields/CodeLink.vue b/packages/editor/src/fields/CodeLink.vue
index 42e0a703..48a0e3aa 100644
--- a/packages/editor/src/fields/CodeLink.vue
+++ b/packages/editor/src/fields/CodeLink.vue
@@ -2,7 +2,7 @@
   <m-fields-link :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></m-fields-link>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCodeLink">
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue
index 55d581b0..87bd197e 100644
--- a/packages/editor/src/fields/CodeSelect.vue
+++ b/packages/editor/src/fields/CodeSelect.vue
@@ -32,7 +32,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCodeSelect">
 import { computed, defineEmits, defineProps, inject, ref, watchEffect } from 'vue';
 import { map, xor } from 'lodash-es';
 
diff --git a/packages/editor/src/fields/UISelect.vue b/packages/editor/src/fields/UISelect.vue
index ed96a7d4..8ae826cb 100644
--- a/packages/editor/src/fields/UISelect.vue
+++ b/packages/editor/src/fields/UISelect.vue
@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorUISelect">
 import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
 
diff --git a/packages/editor/src/layouts/AddPageBox.vue b/packages/editor/src/layouts/AddPageBox.vue
index b9cbf74a..d8bd7295 100644
--- a/packages/editor/src/layouts/AddPageBox.vue
+++ b/packages/editor/src/layouts/AddPageBox.vue
@@ -11,7 +11,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorAddPageBox">
 import { inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 
diff --git a/packages/editor/src/layouts/CodeEditor.vue b/packages/editor/src/layouts/CodeEditor.vue
index 2ba25406..832fb17e 100644
--- a/packages/editor/src/layouts/CodeEditor.vue
+++ b/packages/editor/src/layouts/CodeEditor.vue
@@ -2,7 +2,7 @@
   <div ref="codeEditor" class="magic-code-editor"></div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCodeEditor">
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
index a62f3e6e..89b0e4bc 100644
--- a/packages/editor/src/layouts/Framework.vue
+++ b/packages/editor/src/layouts/Framework.vue
@@ -42,7 +42,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorFramework">
 import { computed, inject, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
diff --git a/packages/editor/src/layouts/Layout.vue b/packages/editor/src/layouts/Layout.vue
index 9a037308..9d9ee856 100644
--- a/packages/editor/src/layouts/Layout.vue
+++ b/packages/editor/src/layouts/Layout.vue
@@ -20,7 +20,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorLayout">
 import { onMounted, onUnmounted, ref } from 'vue';
 
 import Resizer from './Resizer.vue';
diff --git a/packages/editor/src/layouts/NavMenu.vue b/packages/editor/src/layouts/NavMenu.vue
index e5b3a659..c9f6dc16 100644
--- a/packages/editor/src/layouts/NavMenu.vue
+++ b/packages/editor/src/layouts/NavMenu.vue
@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorNavMenu">
 import { computed, inject, markRaw } from 'vue';
 import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 
diff --git a/packages/editor/src/layouts/PropsPanel.vue b/packages/editor/src/layouts/PropsPanel.vue
index 4ae1982b..aa468c50 100644
--- a/packages/editor/src/layouts/PropsPanel.vue
+++ b/packages/editor/src/layouts/PropsPanel.vue
@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorPropsPanel">
 import { computed, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
diff --git a/packages/editor/src/layouts/Resizer.vue b/packages/editor/src/layouts/Resizer.vue
index fab00158..33cb95db 100644
--- a/packages/editor/src/layouts/Resizer.vue
+++ b/packages/editor/src/layouts/Resizer.vue
@@ -4,7 +4,7 @@
   </span>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorResizer">
 import { onMounted, onUnmounted, ref } from 'vue';
 import Gesto from 'gesto';
 
diff --git a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
index ffda74d5..89135017 100644
--- a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
@@ -38,7 +38,7 @@
   </TMagicScrollbar>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorComponentListPanel">
 import { computed, inject, ref } from 'vue';
 import { Grid, Search } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
diff --git a/packages/editor/src/layouts/sidebar/LayerMenu.vue b/packages/editor/src/layouts/sidebar/LayerMenu.vue
index df75059c..14696ad6 100644
--- a/packages/editor/src/layouts/sidebar/LayerMenu.vue
+++ b/packages/editor/src/layouts/sidebar/LayerMenu.vue
@@ -2,7 +2,7 @@
   <content-menu :menu-data="menuData" ref="menu" style="overflow: initial"></content-menu>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorLayerMenu">
 import { computed, inject, markRaw, ref } from 'vue';
 import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons-vue';
 
diff --git a/packages/editor/src/layouts/sidebar/LayerPanel.vue b/packages/editor/src/layouts/sidebar/LayerPanel.vue
index e37afddf..db2606c2 100644
--- a/packages/editor/src/layouts/sidebar/LayerPanel.vue
+++ b/packages/editor/src/layouts/sidebar/LayerPanel.vue
@@ -65,7 +65,7 @@
   </TMagicScrollbar>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorLayerPanel">
 import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Search } from '@element-plus/icons-vue';
 import KeyController from 'keycon';
diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue
index 79984040..b6e6af12 100644
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/packages/editor/src/layouts/sidebar/Sidebar.vue
@@ -78,7 +78,7 @@
   </TMagicTabs>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorSidebar">
 import { computed, ref, watch } from 'vue';
 import { Coin, EditPen, Files } from '@element-plus/icons-vue';
 
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
index 783fe497..36ac24c9 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
@@ -81,7 +81,7 @@
   </TMagicDialog>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCodeBlockEditor">
 import { computed, inject, reactive, ref, watchEffect } from 'vue';
 import { forIn, isEmpty } from 'lodash-es';
 import type * as monaco from 'monaco-editor';
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
index 2751d43f..4d1470c9 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
@@ -93,7 +93,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCodeBlockList">
 import { computed, inject, reactive, ref, watch } from 'vue';
 import { Close, Edit, Link, View } from '@element-plus/icons-vue';
 import { forIn, isEmpty } from 'lodash-es';
diff --git a/packages/editor/src/layouts/workspace/Breadcrumb.vue b/packages/editor/src/layouts/workspace/Breadcrumb.vue
index b0978e69..d3ffbac1 100644
--- a/packages/editor/src/layouts/workspace/Breadcrumb.vue
+++ b/packages/editor/src/layouts/workspace/Breadcrumb.vue
@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MEditorBreadcrumb">
 import { computed, inject } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';
diff --git a/packages/editor/src/layouts/workspace/PageBar.vue b/packages/editor/src/layouts/workspace/PageBar.vue
index 186a71d2..d9c9133f 100644
--- a/packages/editor/src/layouts/workspace/PageBar.vue
+++ b/packages/editor/src/layouts/workspace/PageBar.vue
@@ -46,7 +46,7 @@
   </PageBarScrollContainer>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorPageBar">
 import { computed, inject } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
diff --git a/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue b/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue
index d77d72f5..f055dc06 100644
--- a/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue
+++ b/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue
@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MEditorPageBarScrollContainer">
 import { computed, inject, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
 
diff --git a/packages/editor/src/layouts/workspace/Stage.vue b/packages/editor/src/layouts/workspace/Stage.vue
index ab741ce0..73abdd8b 100644
--- a/packages/editor/src/layouts/workspace/Stage.vue
+++ b/packages/editor/src/layouts/workspace/Stage.vue
@@ -22,7 +22,7 @@
   </scroll-viewer>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorStage">
 import { computed, inject, markRaw, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
diff --git a/packages/editor/src/layouts/workspace/ViewerMenu.vue b/packages/editor/src/layouts/workspace/ViewerMenu.vue
index 45c85735..53fcb0ec 100644
--- a/packages/editor/src/layouts/workspace/ViewerMenu.vue
+++ b/packages/editor/src/layouts/workspace/ViewerMenu.vue
@@ -2,7 +2,7 @@
   <content-menu :menu-data="menuData" ref="menu"></content-menu>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorViewerMenu">
 import { computed, inject, markRaw, reactive, ref, watch } from 'vue';
 import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
 
diff --git a/packages/editor/src/layouts/workspace/Workspace.vue b/packages/editor/src/layouts/workspace/Workspace.vue
index f09a105c..d196cd71 100644
--- a/packages/editor/src/layouts/workspace/Workspace.vue
+++ b/packages/editor/src/layouts/workspace/Workspace.vue
@@ -15,7 +15,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorWorkspace">
 import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
 import KeyController from 'keycon';
 
diff --git a/packages/editor/vite.config.ts b/packages/editor/vite.config.ts
index a8e12300..14244347 100644
--- a/packages/editor/vite.config.ts
+++ b/packages/editor/vite.config.ts
@@ -19,12 +19,13 @@
 import path from 'path';
 
 import { defineConfig } from 'vite';
+import VueSetupExtend from 'vite-plugin-vue-setup-extend';
 import vue from '@vitejs/plugin-vue';
 
 import pkg from './package.json';
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), VueSetupExtend()],
 
   resolve: {
     alias:
diff --git a/packages/form/package.json b/packages/form/package.json
index 45ebaf3a..fa84748b 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -56,6 +56,7 @@
     "sass": "^1.35.1",
     "typescript": "^4.7.4",
     "vite": "^3.1.3",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^1.0.8"
   }
 }
diff --git a/packages/form/src/Form.vue b/packages/form/src/Form.vue
index b1f88c3d..72bf61f1 100644
--- a/packages/form/src/Form.vue
+++ b/packages/form/src/Form.vue
@@ -24,7 +24,7 @@
   </TMagicForm>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MForm">
 import { provide, reactive, ref, toRaw, watch, watchEffect } from 'vue';
 import cloneDeep from 'lodash-es/cloneDeep';
 import isEqual from 'lodash-es/isEqual';
diff --git a/packages/form/src/FormDialog.vue b/packages/form/src/FormDialog.vue
index e9b6727e..7da15813 100644
--- a/packages/form/src/FormDialog.vue
+++ b/packages/form/src/FormDialog.vue
@@ -55,7 +55,7 @@
   </TMagicDialog>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormDialog">
 import { computed, ref } from 'vue';
 
 import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from '@tmagic/design';
diff --git a/packages/form/src/containers/Col.vue b/packages/form/src/containers/Col.vue
index ca776ff5..1882a85b 100644
--- a/packages/form/src/containers/Col.vue
+++ b/packages/form/src/containers/Col.vue
@@ -12,7 +12,7 @@
   </TMagicCol>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormCol">
 import { computed, inject } from 'vue';
 
 import { TMagicCol } from '@tmagic/design';
diff --git a/packages/form/src/containers/Container.vue b/packages/form/src/containers/Container.vue
index e59037ff..c92ee9d4 100644
--- a/packages/form/src/containers/Container.vue
+++ b/packages/form/src/containers/Container.vue
@@ -104,7 +104,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormContainer">
 import { computed, inject, ref, resolveComponent, watchEffect } from 'vue';
 import { WarningFilled } from '@element-plus/icons-vue';
 
diff --git a/packages/form/src/containers/Fieldset.vue b/packages/form/src/containers/Fieldset.vue
index 876fca48..9cdd9a2c 100644
--- a/packages/form/src/containers/Fieldset.vue
+++ b/packages/form/src/containers/Fieldset.vue
@@ -52,7 +52,7 @@
   </fieldset>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormFieldset">
 import { computed, inject, watch } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';
diff --git a/packages/form/src/containers/GroupList.vue b/packages/form/src/containers/GroupList.vue
index e6281c35..74a4b141 100644
--- a/packages/form/src/containers/GroupList.vue
+++ b/packages/form/src/containers/GroupList.vue
@@ -27,7 +27,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormGroupList">
 import { computed, inject } from 'vue';
 import { Grid } from '@element-plus/icons-vue';
 
diff --git a/packages/form/src/containers/GroupListItem.vue b/packages/form/src/containers/GroupListItem.vue
index d218ea93..1effbeae 100644
--- a/packages/form/src/containers/GroupListItem.vue
+++ b/packages/form/src/containers/GroupListItem.vue
@@ -39,7 +39,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormGroupListItem">
 import { computed, inject, ref, watchEffect } from 'vue';
 import { CaretBottom, CaretRight, CaretTop, Delete } from '@element-plus/icons-vue';
 
diff --git a/packages/form/src/containers/Panel.vue b/packages/form/src/containers/Panel.vue
index 2b61cff6..350efc2b 100644
--- a/packages/form/src/containers/Panel.vue
+++ b/packages/form/src/containers/Panel.vue
@@ -49,7 +49,7 @@
   </TMagicCard>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormPanel">
 import { computed, inject, ref } from 'vue';
 import { CaretBottom, CaretRight } from '@element-plus/icons-vue';
 
diff --git a/packages/form/src/containers/Row.vue b/packages/form/src/containers/Row.vue
index 9bb9bfde..e1fd80f3 100644
--- a/packages/form/src/containers/Row.vue
+++ b/packages/form/src/containers/Row.vue
@@ -15,7 +15,7 @@
   </TMagicRow>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormRow">
 import { inject } from 'vue';
 
 import { TMagicRow } from '@tmagic/design';
diff --git a/packages/form/src/containers/Step.vue b/packages/form/src/containers/Step.vue
index 5e4c7cef..7232292d 100644
--- a/packages/form/src/containers/Step.vue
+++ b/packages/form/src/containers/Step.vue
@@ -28,7 +28,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormStep">
 import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicStep, TMagicSteps } from '@tmagic/design';
diff --git a/packages/form/src/containers/Table.vue b/packages/form/src/containers/Table.vue
index 56f80467..0a1cac17 100644
--- a/packages/form/src/containers/Table.vue
+++ b/packages/form/src/containers/Table.vue
@@ -159,7 +159,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormTable">
 import { computed, inject, onMounted, ref, toRefs } from 'vue';
 import { ArrowDown, ArrowUp, Delete, FullScreen, Grid } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
diff --git a/packages/form/src/containers/Tabs.vue b/packages/form/src/containers/Tabs.vue
index 685735ce..3ced9f36 100644
--- a/packages/form/src/containers/Tabs.vue
+++ b/packages/form/src/containers/Tabs.vue
@@ -42,7 +42,7 @@
   </TMagicTabs>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormTabs">
 import { computed, inject, ref, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
diff --git a/packages/form/src/fields/Cascader.vue b/packages/form/src/fields/Cascader.vue
index 08be296a..d680a18f 100644
--- a/packages/form/src/fields/Cascader.vue
+++ b/packages/form/src/fields/Cascader.vue
@@ -14,7 +14,7 @@
   ></TMagicCascader>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormCascader">
 import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicCascader } from '@tmagic/design';
diff --git a/packages/form/src/fields/Checkbox.vue b/packages/form/src/fields/Checkbox.vue
index a6d25d64..42527f2c 100644
--- a/packages/form/src/fields/Checkbox.vue
+++ b/packages/form/src/fields/Checkbox.vue
@@ -10,7 +10,7 @@
   >
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormCheckbox">
 import { computed } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';
diff --git a/packages/form/src/fields/CheckboxGroup.vue b/packages/form/src/fields/CheckboxGroup.vue
index 8eb80abe..67357ad4 100644
--- a/packages/form/src/fields/CheckboxGroup.vue
+++ b/packages/form/src/fields/CheckboxGroup.vue
@@ -6,7 +6,7 @@
   </TMagicCheckboxGroup>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormCheckGroup">
 import { computed, inject } from 'vue';
 
 import { TMagicCheckbox, TMagicCheckboxGroup } from '@tmagic/design';
diff --git a/packages/form/src/fields/ColorPicker.vue b/packages/form/src/fields/ColorPicker.vue
index 797dc4bf..0732bbef 100644
--- a/packages/form/src/fields/ColorPicker.vue
+++ b/packages/form/src/fields/ColorPicker.vue
@@ -8,7 +8,7 @@
   ></TMagicColorPicker>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormColorPicker">
 import { TMagicColorPicker } from '@tmagic/design';
 
 import { ColorPickConfig } from '../schema';
diff --git a/packages/form/src/fields/Date.vue b/packages/form/src/fields/Date.vue
index 35730ed8..2a9d2342 100644
--- a/packages/form/src/fields/Date.vue
+++ b/packages/form/src/fields/Date.vue
@@ -11,7 +11,7 @@
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormDate">
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
diff --git a/packages/form/src/fields/DateTime.vue b/packages/form/src/fields/DateTime.vue
index 68665f01..6c88d28a 100644
--- a/packages/form/src/fields/DateTime.vue
+++ b/packages/form/src/fields/DateTime.vue
@@ -13,7 +13,7 @@
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormDateTime">
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
diff --git a/packages/form/src/fields/Daterange.vue b/packages/form/src/fields/Daterange.vue
index 49484fc7..a65afc6a 100644
--- a/packages/form/src/fields/Daterange.vue
+++ b/packages/form/src/fields/Daterange.vue
@@ -13,7 +13,7 @@
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormDateRange">
 import { ref, watch } from 'vue';
 
 import { TMagicDatePicker } from '@tmagic/design';
diff --git a/packages/form/src/fields/Display.vue b/packages/form/src/fields/Display.vue
index 21706fdf..01d5917a 100644
--- a/packages/form/src/fields/Display.vue
+++ b/packages/form/src/fields/Display.vue
@@ -2,7 +2,7 @@
   <span v-if="model">{{ model[name] }}</span>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormDisplay">
 import { DisplayConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
diff --git a/packages/form/src/fields/DynamicField.vue b/packages/form/src/fields/DynamicField.vue
index 2c1528ef..5a2b1994 100644
--- a/packages/form/src/fields/DynamicField.vue
+++ b/packages/form/src/fields/DynamicField.vue
@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormDynamicField">
 /**
  * 动态表单，目前只支持input类型字段
  * inputType: 'dynamic-field',
diff --git a/packages/form/src/fields/Hidden.vue b/packages/form/src/fields/Hidden.vue
index cbf24bf8..607f2c2f 100644
--- a/packages/form/src/fields/Hidden.vue
+++ b/packages/form/src/fields/Hidden.vue
@@ -2,7 +2,7 @@
   <input v-if="model" v-model="model[name]" type="hidden" />
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormHidden">
 import { HiddenConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
diff --git a/packages/form/src/fields/Link.vue b/packages/form/src/fields/Link.vue
index 1b49ad6f..447fafa5 100644
--- a/packages/form/src/fields/Link.vue
+++ b/packages/form/src/fields/Link.vue
@@ -16,7 +16,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormLink">
 import { computed, inject, ref } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';
diff --git a/packages/form/src/fields/Number.vue b/packages/form/src/fields/Number.vue
index 585b60ab..a0345de7 100644
--- a/packages/form/src/fields/Number.vue
+++ b/packages/form/src/fields/Number.vue
@@ -15,7 +15,7 @@
   ></TMagicInputNumber>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormNumber">
 import { inject } from 'vue';
 
 import { TMagicInputNumber } from '@tmagic/design';
diff --git a/packages/form/src/fields/RadioGroup.vue b/packages/form/src/fields/RadioGroup.vue
index 1e75ba14..0477d67a 100644
--- a/packages/form/src/fields/RadioGroup.vue
+++ b/packages/form/src/fields/RadioGroup.vue
@@ -6,7 +6,7 @@
   </TMagicRadioGroup>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormRadioGroup">
 import { TMagicRadio, TMagicRadioGroup } from '@tmagic/design';
 
 import { RadioGroupConfig } from '../schema';
diff --git a/packages/form/src/fields/Select.vue b/packages/form/src/fields/Select.vue
index 0140d18a..292c91a1 100644
--- a/packages/form/src/fields/Select.vue
+++ b/packages/form/src/fields/Select.vue
@@ -25,7 +25,7 @@
   </TMagicSelect>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormSelect">
 import { inject, nextTick, onBeforeMount, onMounted, Ref, ref, watchEffect } from 'vue';
 
 import { TMagicSelect } from '@tmagic/design';
diff --git a/packages/form/src/fields/SelectOptionGroups.vue b/packages/form/src/fields/SelectOptionGroups.vue
index 527ea573..9252abe3 100644
--- a/packages/form/src/fields/SelectOptionGroups.vue
+++ b/packages/form/src/fields/SelectOptionGroups.vue
@@ -12,7 +12,7 @@
   </TMagicOptionGroup>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormSelectOptionGroups">
 import { getConfig, TMagicOptionGroup } from '@tmagic/design';
 
 import { SelectGroupOption } from '../schema';
diff --git a/packages/form/src/fields/SelectOptions.vue b/packages/form/src/fields/SelectOptions.vue
index af8a97d6..e920c2a5 100644
--- a/packages/form/src/fields/SelectOptions.vue
+++ b/packages/form/src/fields/SelectOptions.vue
@@ -8,7 +8,7 @@
   ></TMagicOption>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormSelectOptions">
 import { TMagicOption } from '@tmagic/design';
 
 import { SelectOption } from '../schema';
diff --git a/packages/form/src/fields/Switch.vue b/packages/form/src/fields/Switch.vue
index 251a5947..c91dccc7 100644
--- a/packages/form/src/fields/Switch.vue
+++ b/packages/form/src/fields/Switch.vue
@@ -9,7 +9,7 @@
   ></TMagicSwitch>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormSwitch">
 import { computed } from 'vue';
 
 import { TMagicSwitch } from '@tmagic/design';
diff --git a/packages/form/src/fields/Text.vue b/packages/form/src/fields/Text.vue
index ecfff00b..5e810a25 100644
--- a/packages/form/src/fields/Text.vue
+++ b/packages/form/src/fields/Text.vue
@@ -23,7 +23,7 @@
   </TMagicInput>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormText">
 import { inject } from 'vue';
 
 import { TMagicInput } from '@tmagic/design';
diff --git a/packages/form/src/fields/Textarea.vue b/packages/form/src/fields/Textarea.vue
index 4bdb6cb6..e46c1653 100644
--- a/packages/form/src/fields/Textarea.vue
+++ b/packages/form/src/fields/Textarea.vue
@@ -12,7 +12,7 @@
   </TMagicInput>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormTextarea">
 import { inject } from 'vue';
 
 import { TMagicInput } from '@tmagic/design';
diff --git a/packages/form/src/fields/Time.vue b/packages/form/src/fields/Time.vue
index 5e4305be..7d26d792 100644
--- a/packages/form/src/fields/Time.vue
+++ b/packages/form/src/fields/Time.vue
@@ -8,7 +8,7 @@
   ></TMagicTimePicker>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormTime">
 import { TMagicTimePicker } from '@tmagic/design';
 
 import { TimeConfig } from '../schema';
diff --git a/packages/form/vite.config.ts b/packages/form/vite.config.ts
index b7653ac4..d13880b1 100644
--- a/packages/form/vite.config.ts
+++ b/packages/form/vite.config.ts
@@ -19,12 +19,13 @@
 import path from 'path';
 
 import { defineConfig } from 'vite';
+import VueSetupExtend from 'vite-plugin-vue-setup-extend';
 import vue from '@vitejs/plugin-vue';
 
 import pkg from './package.json';
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), VueSetupExtend()],
 
   resolve: {
     alias:
diff --git a/packages/stage/src/types.ts b/packages/stage/src/types.ts
index 84ff747f..0301c636 100644
--- a/packages/stage/src/types.ts
+++ b/packages/stage/src/types.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { MoveableOptions } from 'moveable';
+import type { MoveableOptions } from 'moveable';
 
 import Core from '@tmagic/core';
 import type { Id, MApp, MContainer, MNode } from '@tmagic/schema';
diff --git a/packages/table/package.json b/packages/table/package.json
index 1d07a1af..d7ee5b7e 100644
--- a/packages/table/package.json
+++ b/packages/table/package.json
@@ -53,6 +53,7 @@
     "sass": "^1.35.1",
     "typescript": "^4.7.4",
     "vite": "^3.1.3",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^1.0.8"
   }
 }
diff --git a/packages/table/src/ActionsColumn.vue b/packages/table/src/ActionsColumn.vue
index 82c5fe0b..353336e7 100644
--- a/packages/table/src/ActionsColumn.vue
+++ b/packages/table/src/ActionsColumn.vue
@@ -35,7 +35,7 @@
   </TMagicTableColumn>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MTableActionsColumn">
 import { TMagicButton, tMagicMessage, TMagicTableColumn } from '@tmagic/design';
 
 import { ColumnActionConfig, ColumnConfig } from './schema';
diff --git a/packages/table/src/ExpandColumn.vue b/packages/table/src/ExpandColumn.vue
index cc7f7990..1974d247 100644
--- a/packages/table/src/ExpandColumn.vue
+++ b/packages/table/src/ExpandColumn.vue
@@ -16,7 +16,7 @@
   </TMagicTableColumn>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MTableExpandColumn">
 import { TMagicTableColumn } from '@tmagic/design';
 import { MForm } from '@tmagic/form';
 
diff --git a/packages/table/src/PopoverColumn.vue b/packages/table/src/PopoverColumn.vue
index 063dc84d..aed3052a 100644
--- a/packages/table/src/PopoverColumn.vue
+++ b/packages/table/src/PopoverColumn.vue
@@ -21,7 +21,7 @@
   </TMagicTableColumn>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MTablePopoverColumn">
 import { TMagicButton, TMagicPopover, TMagicTableColumn } from '@tmagic/design';
 
 import { ColumnConfig } from './schema';
diff --git a/packages/table/src/Table.vue b/packages/table/src/Table.vue
index 1b251b42..5e1f1939 100644
--- a/packages/table/src/Table.vue
+++ b/packages/table/src/Table.vue
@@ -55,7 +55,7 @@
   </TMagicTable>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MTable">
 import { computed, ref } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
diff --git a/packages/table/src/TextColumn.vue b/packages/table/src/TextColumn.vue
index 6f57436f..74f105e6 100644
--- a/packages/table/src/TextColumn.vue
+++ b/packages/table/src/TextColumn.vue
@@ -57,7 +57,7 @@
   </TMagicTableColumn>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MTableColumn">
 import { TMagicButton, TMagicForm, TMagicTableColumn, TMagicTag } from '@tmagic/design';
 
 import { ColumnConfig } from './schema';
diff --git a/packages/table/vite.config.ts b/packages/table/vite.config.ts
index 9d4c7bef..bf7ed65b 100644
--- a/packages/table/vite.config.ts
+++ b/packages/table/vite.config.ts
@@ -19,12 +19,13 @@
 import path from 'path';
 
 import { defineConfig } from 'vite';
+import VueSetupExtend from 'vite-plugin-vue-setup-extend';
 import vue from '@vitejs/plugin-vue';
 
 import pkg from './package.json';
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), VueSetupExtend()],
 
   resolve: {
     alias:
diff --git a/playground/package.json b/playground/package.json
index a915de70..c5d6cb11 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -36,6 +36,7 @@
     "sass": "^1.35.1",
     "typescript": "^4.7.4",
     "vite": "^3.1.3",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^1.0.8"
   }
 }
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index 5a871f21..20b32405 100644
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -19,6 +19,7 @@
 import path from 'path';
 
 import { defineConfig } from 'vite';
+import VueSetupExtend from 'vite-plugin-vue-setup-extend';
 import legacy from '@vitejs/plugin-legacy';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
@@ -27,6 +28,7 @@ export default defineConfig({
   plugins: [
     vue(),
     vueJsx(),
+    VueSetupExtend(),
     legacy({
       targets: ['defaults', 'not IE 11'],
     }),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 857070fe..0a161cf6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -170,6 +170,7 @@ importers:
       rimraf: ^3.0.2
       typescript: ^4.7.4
       vite: ^3.1.3
+      vite-plugin-vue-setup-extend: ^0.4.0
       vue: ^3.2.37
       vue-tsc: ^1.0.8
     dependencies:
@@ -182,6 +183,7 @@ importers:
       rimraf: 3.0.2
       typescript: 4.7.4
       vite: 3.1.3
+      vite-plugin-vue-setup-extend: 0.4.0_vite@3.1.3
       vue-tsc: 1.0.8_typescript@4.7.4
 
   packages/editor:
@@ -213,6 +215,7 @@ importers:
       serialize-javascript: ^6.0.0
       typescript: ^4.7.4
       vite: ^3.1.3
+      vite-plugin-vue-setup-extend: ^0.4.0
       vue: ^3.2.37
       vue-tsc: ^1.0.8
     dependencies:
@@ -245,6 +248,7 @@ importers:
       sass: 1.52.2
       typescript: 4.7.4
       vite: 3.1.3_sass@1.52.2
+      vite-plugin-vue-setup-extend: 0.4.0_vite@3.1.3
       vue-tsc: 1.0.8_typescript@4.7.4
 
   packages/element-plus-adapter:
@@ -282,6 +286,7 @@ importers:
       sortablejs: ^1.14.0
       typescript: ^4.7.4
       vite: ^3.1.3
+      vite-plugin-vue-setup-extend: ^0.4.0
       vue: ^3.2.37
       vue-tsc: ^1.0.8
     dependencies:
@@ -303,6 +308,7 @@ importers:
       sass: 1.52.2
       typescript: 4.7.4
       vite: 3.1.3_sass@1.52.2
+      vite-plugin-vue-setup-extend: 0.4.0_vite@3.1.3
       vue-tsc: 1.0.8_typescript@4.7.4
 
   packages/schema:
@@ -370,6 +376,7 @@ importers:
       sass: ^1.35.1
       typescript: ^4.7.4
       vite: ^3.1.3
+      vite-plugin-vue-setup-extend: ^0.4.0
       vue: ^3.2.37
       vue-tsc: ^1.0.8
     dependencies:
@@ -389,6 +396,7 @@ importers:
       sass: 1.52.2
       typescript: 4.7.4
       vite: 3.1.3_sass@1.52.2
+      vite-plugin-vue-setup-extend: 0.4.0_vite@3.1.3
       vue-tsc: 1.0.8_typescript@4.7.4
 
   packages/ui:
@@ -498,6 +506,7 @@ importers:
       terser: ^5.14.2
       typescript: ^4.7.4
       vite: ^3.1.3
+      vite-plugin-vue-setup-extend: ^0.4.0
       vue: ^3.2.37
       vue-router: ^4.0.10
       vue-tsc: ^1.0.8
@@ -526,6 +535,7 @@ importers:
       sass: 1.52.2
       typescript: 4.7.4
       vite: 3.1.3_sass@1.52.2+terser@5.14.2
+      vite-plugin-vue-setup-extend: 0.4.0_vite@3.1.3
       vue-tsc: 1.0.8_typescript@4.7.4
 
   runtime/react:
@@ -7566,6 +7576,16 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
+  /vite-plugin-vue-setup-extend/0.4.0_vite@3.1.3:
+    resolution: {integrity: sha512-WMbjPCui75fboFoUTHhdbXzu4Y/bJMv5N9QT9a7do3wNMNHHqrk+Tn2jrSJU0LS5fGl/EG+FEDBYVUeWIkDqXQ==}
+    peerDependencies:
+      vite: '>=2.0.0'
+    dependencies:
+      '@vue/compiler-sfc': 3.2.41
+      magic-string: 0.25.9
+      vite: 3.1.3
+    dev: true
+
   /vite/3.0.9:
     resolution: {integrity: sha512-waYABTM+G6DBTCpYAxvevpG50UOlZuynR0ckTK5PawNVt7ebX6X7wNXHaGIO6wYYFXSM7/WcuFuO2QzhBB6aMw==}
     engines: {node: ^14.18.0 || >=16.0.0}