diff --git a/src/field/README.md b/src/field/README.md
index beab34f32..ecf5367e2 100644
--- a/src/field/README.md
+++ b/src/field/README.md
@@ -23,11 +23,12 @@ The value of field is bound with v-model.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      value: '',
-    };
+  setup() {
+    const value = ref('');
+    return { value };
   },
 };
 ```
@@ -45,14 +46,20 @@ Use `type` prop to custom different type fields.
 ```
 
 ```js
+import { reactive, toRefs } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       tel: '',
       text: '',
       digit: '',
       number: '',
       password: '',
+    });
+
+    return {
+      ...toRefs(state),
     };
   },
 };
@@ -89,11 +96,17 @@ export default {
 ```
 
 ```js
+import { reactive, toRefs } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value1: '',
       value2: '123',
+    });
+
+    return {
+      ...toRefs(state),
     };
   },
 };
@@ -155,18 +168,21 @@ Use `formatter` prop to format the input value.
 ```
 
 ```js
+import { reactive, toRefs } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value1: '',
       value2: '',
+    });
+    const formatter = (value) => value.replace(/\d/g, '');
+
+    return {
+      ...toRefs(state),
+      formatter,
     };
   },
-  methods: {
-    formatter(value) {
-      return value.replace(/\d/g, '');
-    },
-  },
 };
 ```
 
diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md
index f8c47439b..900d7ebac 100644
--- a/src/field/README.zh-CN.md
+++ b/src/field/README.zh-CN.md
@@ -28,11 +28,12 @@ app.use(Field);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      value: '',
-    };
+  setup() {
+    const value = ref('');
+    return { value };
   },
 };
 ```
@@ -55,14 +56,20 @@ export default {
 ```
 
 ```js
+import { reactive, toRefs } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       tel: '',
       text: '',
       digit: '',
       number: '',
       password: '',
+    });
+
+    return {
+      ...toRefs(state),
     };
   },
 };
@@ -105,11 +112,17 @@ export default {
 ```
 
 ```js
+import { reactive, toRefs } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value1: '',
       value2: '123',
+    });
+
+    return {
+      ...toRefs(state),
     };
   },
 };
@@ -177,19 +190,22 @@ export default {
 ```
 
 ```js
+import { reactive, toRefs } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value1: '',
       value2: '',
+    });
+    // 过滤输入的数字
+    const formatter = (value) => value.replace(/\d/g, '');
+
+    return {
+      ...toRefs(state),
+      formatter,
     };
   },
-  methods: {
-    formatter(value) {
-      // 过滤输入的数字
-      return value.replace(/\d/g, '');
-    },
-  },
 };
 ```
 
diff --git a/src/field/demo/Autosize.vue b/src/field/demo/Autosize.vue
index 4c0f63513..fcc6b5dab 100644
--- a/src/field/demo/Autosize.vue
+++ b/src/field/demo/Autosize.vue
@@ -12,6 +12,8 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -26,10 +28,9 @@ export default {
     },
   },
 
-  data() {
-    return {
-      value: '',
-    };
+  setup() {
+    const value = ref('');
+    return { value };
   },
 };
 </script>
diff --git a/src/field/demo/BasicUsage.vue b/src/field/demo/BasicUsage.vue
index 8c805a6ce..92d168094 100644
--- a/src/field/demo/BasicUsage.vue
+++ b/src/field/demo/BasicUsage.vue
@@ -11,6 +11,8 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -23,10 +25,9 @@ export default {
     },
   },
 
-  data() {
-    return {
-      value: '',
-    };
+  setup() {
+    const value = ref('');
+    return { value };
   },
 };
 </script>
diff --git a/src/field/demo/CustomType.vue b/src/field/demo/CustomType.vue
index 1c251a865..721a0a8a3 100644
--- a/src/field/demo/CustomType.vue
+++ b/src/field/demo/CustomType.vue
@@ -33,6 +33,8 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -62,13 +64,15 @@ export default {
   },
 
   data() {
-    return {
+    const state = reactive({
       text: '',
       phone: '',
       digit: '',
       number: '',
       password: '',
-    };
+    });
+
+    return toRefs(state);
   },
 };
 </script>
diff --git a/src/field/demo/ErrorInfo.vue b/src/field/demo/ErrorInfo.vue
index ff3703872..1c49b02ba 100644
--- a/src/field/demo/ErrorInfo.vue
+++ b/src/field/demo/ErrorInfo.vue
@@ -18,6 +18,8 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -35,10 +37,12 @@ export default {
   },
 
   data() {
-    return {
+    const state = reactive({
       phone: '123',
       username: '',
-    };
+    });
+
+    return toRefs(state);
   },
 };
 </script>
diff --git a/src/field/demo/FormatValue.vue b/src/field/demo/FormatValue.vue
index 20c10269f..7e09d267a 100644
--- a/src/field/demo/FormatValue.vue
+++ b/src/field/demo/FormatValue.vue
@@ -17,6 +17,8 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -33,17 +35,17 @@ export default {
     },
   },
 
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value1: '',
       value2: '',
-    };
-  },
+    });
+    const formatter = (value) => value.replace(/\d/g, '');
 
-  methods: {
-    formatter(value) {
-      return value.replace(/\d/g, '');
-    },
+    return {
+      ...toRefs(state),
+      formatter,
+    };
   },
 };
 </script>
diff --git a/src/field/demo/InputAlign.vue b/src/field/demo/InputAlign.vue
index 9a8bd547d..d8d325e91 100644
--- a/src/field/demo/InputAlign.vue
+++ b/src/field/demo/InputAlign.vue
@@ -10,6 +10,8 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -24,10 +26,9 @@ export default {
     },
   },
 
-  data() {
-    return {
-      value: '',
-    };
+  setup() {
+    const value = ref('');
+    return { value };
   },
 };
 </script>
diff --git a/src/field/demo/InsertButton.vue b/src/field/demo/InsertButton.vue
index 1d1ba881a..07025068b 100644
--- a/src/field/demo/InsertButton.vue
+++ b/src/field/demo/InsertButton.vue
@@ -17,6 +17,8 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -33,10 +35,9 @@ export default {
     },
   },
 
-  data() {
-    return {
-      sms: '',
-    };
+  setup() {
+    const sms = ref('');
+    return { sms };
   },
 };
 </script>
diff --git a/src/field/demo/ShowIcon.vue b/src/field/demo/ShowIcon.vue
index 03aafbf17..67940ea60 100644
--- a/src/field/demo/ShowIcon.vue
+++ b/src/field/demo/ShowIcon.vue
@@ -18,6 +18,8 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -32,11 +34,13 @@ export default {
     },
   },
 
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       icon1: '',
       icon2: '123',
-    };
+    });
+
+    return toRefs(state);
   },
 };
 </script>
diff --git a/src/field/demo/ShowWordLimit.vue b/src/field/demo/ShowWordLimit.vue
index 44728e01e..e9a272b8b 100644
--- a/src/field/demo/ShowWordLimit.vue
+++ b/src/field/demo/ShowWordLimit.vue
@@ -14,6 +14,8 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -28,10 +30,9 @@ export default {
     },
   },
 
-  data() {
-    return {
-      value: '',
-    };
+  setup() {
+    const value = ref('');
+    return { value };
   },
 };
 </script>