diff --git a/src/area/demo/index.vue b/src/area/demo/index.vue
index 1d8d89a8d..90afa895e 100644
--- a/src/area/demo/index.vue
+++ b/src/area/demo/index.vue
@@ -20,31 +20,37 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { ref } from 'vue';
 import AreaList from './area';
 import AreaListEn from './area-en';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    title2: '选中省市区',
+    title3: '配置显示列',
+    title4: '配置列占位提示文字',
+    columnsPlaceholder: ['请选择', '请选择', '请选择'],
+    areaList: AreaList,
+  },
+  'en-US': {
+    title2: 'Initial Value',
+    title3: 'Columns Number',
+    title4: 'Columns Placeholder',
+    columnsPlaceholder: ['Choose', 'Choose', 'Choose'],
+    areaList: AreaListEn,
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      title2: '选中省市区',
-      title3: '配置显示列',
-      title4: '配置列占位提示文字',
-      columnsPlaceholder: ['请选择', '请选择', '请选择'],
-      areaList: AreaList,
-    },
-    'en-US': {
-      title2: 'Initial Value',
-      title3: 'Columns Number',
-      title4: 'Columns Placeholder',
-      columnsPlaceholder: ['Choose', 'Choose', 'Choose'],
-      areaList: AreaListEn,
-    },
-  },
+  setup() {
+    const t = useTranslate(i18n);
+    const value = ref('330302');
 
-  data() {
     return {
-      value: '330302',
+      t,
+      value,
     };
   },
 };