diff --git a/src/contact-edit/README.md b/src/contact-edit/README.md
index 5d4f48032..ab5af0535 100644
--- a/src/contact-edit/README.md
+++ b/src/contact-edit/README.md
@@ -26,21 +26,24 @@ app.use(ContactEdit);
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      editingContact: {},
-    };
-  },
-  methods: {
-    onSave(contactInfo) {
+  setup() {
+    const editingContact = ref({});
+    const onSave = (contactInfo) => {
       Toast('Save');
-    },
-    onDelete(contactInfo) {
+    };
+    const onDelete = (contactInfo) => {
       Toast('Delete');
-    },
+    };
+
+    return {
+      onSave,
+      onDelete,
+      editingContact,
+    };
   },
 };
 ```
diff --git a/src/contact-edit/README.zh-CN.md b/src/contact-edit/README.zh-CN.md
index c72e90a18..d12da3454 100644
--- a/src/contact-edit/README.zh-CN.md
+++ b/src/contact-edit/README.zh-CN.md
@@ -30,21 +30,24 @@ app.use(ContactEdit);
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      editingContact: {},
-    };
-  },
-  methods: {
-    onSave(contactInfo) {
+  setup() {
+    const editingContact = ref({});
+    const onSave = (contactInfo) => {
       Toast('保存');
-    },
-    onDelete(contactInfo) {
+    };
+    const onDelete = (contactInfo) => {
       Toast('删除');
-    },
+    };
+
+    return {
+      onSave,
+      onDelete,
+      editingContact,
+    };
   },
 };
 ```
diff --git a/src/contact-edit/demo/index.vue b/src/contact-edit/demo/index.vue
index 4f1985324..53e9c6e60 100644
--- a/src/contact-edit/demo/index.vue
+++ b/src/contact-edit/demo/index.vue
@@ -11,30 +11,38 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import Toast from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    defaultLabel: '设为默认联系人',
+  },
+  'en-US': {
+    defaultLabel: 'Set as the default contact',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      defaultLabel: '设为默认联系人',
-    },
-    'en-US': {
-      defaultLabel: 'Set as the default contact',
-    },
-  },
+  setup() {
+    const t = useTranslate(i18n);
+    const editingContact = ref({});
 
-  data() {
-    return {
-      editingContact: {},
+    const onSave = () => {
+      Toast(t('save'));
+    };
+    const onDelete = () => {
+      Toast(t('delete'));
     };
-  },
 
-  methods: {
-    onSave() {
-      this.$toast(this.t('save'));
-    },
-    onDelete() {
-      this.$toast(this.t('delete'));
-    },
+    return {
+      t,
+      onSave,
+      onDelete,
+      editingContact,
+    };
   },
 };
 </script>