diff --git a/src/address-edit/README.md b/src/address-edit/README.md
index ecbca56f9..e407abadc 100644
--- a/src/address-edit/README.md
+++ b/src/address-edit/README.md
@@ -30,34 +30,39 @@ app.use(AddressEdit);
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      areaList,
-      searchResult: [],
-    };
-  },
-  methods: {
-    onSave() {
+  setup() {
+    const searchResult = ref([]);
+
+    const onSave = () => {
       Toast('save');
-    },
-    onDelete() {
+    };
+    const onDelete = () => {
       Toast('delete');
-    },
-    onChangeDetail(val) {
+    };
+    const onChangeDetail = (val) => {
       if (val) {
-        this.searchResult = [
+        searchResult.value = [
           {
-            name: '黄龙万科中心',
-            address: '杭州市西湖区',
+            name: 'Name1',
+            address: 'Address',
           },
         ];
       } else {
-        this.searchResult = [];
+        searchResult.value = [];
       }
-    },
+    };
+
+    return {
+      onSave,
+      onDelete,
+      areaList,
+      searchResult,
+      onChangeDetail,
+    };
   },
 };
 ```
diff --git a/src/address-edit/README.zh-CN.md b/src/address-edit/README.zh-CN.md
index d1accc9ec..784306ed4 100644
--- a/src/address-edit/README.zh-CN.md
+++ b/src/address-edit/README.zh-CN.md
@@ -34,34 +34,39 @@ app.use(AddressEdit);
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      areaList,
-      searchResult: [],
-    };
-  },
-  methods: {
-    onSave() {
+  setup() {
+    const searchResult = ref([]);
+
+    const onSave = () => {
       Toast('save');
-    },
-    onDelete() {
+    };
+    const onDelete = () => {
       Toast('delete');
-    },
-    onChangeDetail(val) {
+    };
+    const onChangeDetail = (val) => {
       if (val) {
-        this.searchResult = [
+        searchResult.value = [
           {
             name: '黄龙万科中心',
             address: '杭州市西湖区',
           },
         ];
       } else {
-        this.searchResult = [];
+        searchResult.value = [];
       }
-    },
+    };
+
+    return {
+      onSave,
+      onDelete,
+      areaList,
+      searchResult,
+      onChangeDetail,
+    };
   },
 };
 ```
diff --git a/src/address-edit/demo/index.vue b/src/address-edit/demo/index.vue
index 308ae2733..750cea351 100644
--- a/src/address-edit/demo/index.vue
+++ b/src/address-edit/demo/index.vue
@@ -15,64 +15,71 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import Toast from '../../toast';
 import areaList from '../../area/demo/area';
 
+const i18n = {
+  'zh-CN': {
+    areaColumnsPlaceholder: ['请选择', '请选择', '请选择'],
+    searchResult: [
+      {
+        name: '黄龙万科中心',
+        address: '杭州市西湖区',
+      },
+      {
+        name: '黄龙万科中心G座',
+      },
+      {
+        name: '黄龙万科中心H座',
+        address: '杭州市西湖区',
+      },
+    ],
+  },
+  'en-US': {
+    areaColumnsPlaceholder: ['Choose', 'Choose', 'Choose'],
+    searchResult: [
+      {
+        name: 'Name1',
+        address: 'Address',
+      },
+      {
+        name: 'Name2',
+      },
+      {
+        name: 'Name3',
+        address: 'Address',
+      },
+    ],
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      areaColumnsPlaceholder: ['请选择', '请选择', '请选择'],
-      searchResult: [
-        {
-          name: '黄龙万科中心',
-          address: '杭州市西湖区',
-        },
-        {
-          name: '黄龙万科中心G座',
-        },
-        {
-          name: '黄龙万科中心H座',
-          address: '杭州市西湖区',
-        },
-      ],
-    },
-    'en-US': {
-      areaColumnsPlaceholder: ['Choose', 'Choose', 'Choose'],
-      searchResult: [
-        {
-          name: 'Name1',
-          address: 'Address',
-        },
-        {
-          name: 'Name2',
-        },
-        {
-          name: 'Name3',
-          address: 'Address',
-        },
-      ],
-    },
-  },
+  setup() {
+    const t = useTranslate(i18n);
+    const searchResult = ref([]);
 
-  data() {
-    return {
-      areaList,
-      searchResult: [],
+    const onSave = () => {
+      Toast(t('save'));
     };
-  },
 
-  methods: {
-    onSave() {
-      this.$toast(this.t('save'));
-    },
+    const onDelete = () => {
+      Toast(t('delete'));
+    };
 
-    onDelete() {
-      this.$toast(this.t('delete'));
-    },
+    const onChangeDetail = (val: string) => {
+      searchResult.value = val ? t('searchResult') : [];
+    };
 
-    onChangeDetail(val) {
-      this.searchResult = val ? this.t('searchResult') : [];
-    },
+    return {
+      onSave,
+      onDelete,
+      areaList,
+      searchResult,
+      onChangeDetail,
+    };
   },
 };
 </script>