diff --git a/src/datetime-picker/README.md b/src/datetime-picker/README.md
index 724e53d99..287c60616 100644
--- a/src/datetime-picker/README.md
+++ b/src/datetime-picker/README.md
@@ -32,7 +32,7 @@ app.use(DatetimePicker);
 import { ref } from 'vue';
 
 export default {
-  data() {
+  setup() {
     const currentDate = ref(new Date());
     return {
       minDate: new Date(2020, 0, 1),
@@ -60,7 +60,7 @@ export default {
 import { ref } from 'vue';
 
 export default {
-  data() {
+  setup() {
     const currentDate = ref(new Date());
 
     const formatter = (type, val) => {
@@ -99,7 +99,7 @@ export default {
 import { ref } from 'vue';
 
 export default {
-  data() {
+  setup() {
     const currentDate = ref(new Date());
 
     const formatter = (type, val) => {
@@ -137,7 +137,7 @@ export default {
 import { ref } from 'vue';
 
 export default {
-  data() {
+  setup() {
     const currentTime = ref('12:00');
     return { currentTime };
   },
@@ -160,7 +160,7 @@ export default {
 import { ref } from 'vue';
 
 export default {
-  data() {
+  setup() {
     const currentDate = ref(new Date());
     return {
       minDate: new Date(2020, 0, 1),
@@ -187,7 +187,7 @@ export default {
 import { ref } from 'vue';
 
 export default {
-  data() {
+  setup() {
     const currentDate = ref(new Date());
     return {
       minDate: new Date(2020, 0, 1),
@@ -213,7 +213,7 @@ export default {
 import { ref } from 'vue';
 
 export default {
-  data() {
+  setup() {
     const currentTime = ref('12:00');
 
     const filter = (type, options) => {
diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md
index 091810dcb..2c4968485 100644
--- a/src/datetime-picker/README.zh-CN.md
+++ b/src/datetime-picker/README.zh-CN.md
@@ -34,7 +34,7 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型，type 为
 import { ref } from 'vue';
 
 export default {
-  data() {
+  setup() {
     const currentDate = ref(new Date());
     return {
       minDate: new Date(2020, 0, 1),
@@ -64,7 +64,7 @@ export default {
 import { ref } from 'vue';
 
 export default {
-  data() {
+  setup() {
     const currentDate = ref(new Date());
 
     const formatter = (type, val) => {
@@ -105,7 +105,7 @@ export default {
 import { ref } from 'vue';
 
 export default {
-  data() {
+  setup() {
     const currentDate = ref(new Date());
 
     const formatter = (type, val) => {
@@ -145,7 +145,7 @@ export default {
 import { ref } from 'vue';
 
 export default {
-  data() {
+  setup() {
     const currentTime = ref('12:00');
     return { currentTime };
   },
@@ -170,7 +170,7 @@ export default {
 import { ref } from 'vue';
 
 export default {
-  data() {
+  setup() {
     const currentDate = ref(new Date());
     return {
       minDate: new Date(2020, 0, 1),
@@ -199,7 +199,7 @@ export default {
 import { ref } from 'vue';
 
 export default {
-  data() {
+  setup() {
     const currentDate = ref(new Date());
     return {
       minDate: new Date(2020, 0, 1),
@@ -222,7 +222,7 @@ export default {
 import { ref } from 'vue';
 
 export default {
-  data() {
+  setup() {
     const currentTime = ref('12:00');
 
     const filter = (type, options) => {
diff --git a/src/form/README.md b/src/form/README.md
index 967df44d0..ff22456c6 100644
--- a/src/form/README.md
+++ b/src/form/README.md
@@ -17,14 +17,14 @@ app.use(Form);
 ```html
 <van-form @submit="onSubmit">
   <van-field
-    v-model="username"
+    v-model="state.username"
     name="Username"
     label="Username"
     placeholder="Username"
     :rules="[{ required: true, message: 'Username is required' }]"
   />
   <van-field
-    v-model="password"
+    v-model="state.password"
     type="password"
     name="Password"
     label="Password"
@@ -40,17 +40,22 @@ app.use(Form);
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       username: '',
       password: '',
-    };
-  },
-  methods: {
-    onSubmit(values) {
+    });
+    const onSubmit = (values) => {
       console.log('submit', values);
-    },
+    };
+
+    return {
+      state,
+      onSubmit,
+    };
   },
 };
 ```
@@ -60,19 +65,19 @@ export default {
 ```html
 <van-form validate-first @failed="onFailed">
   <van-field
-    v-model="value1"
+    v-model="state.value1"
     name="pattern"
     placeholder="USe pattern"
     :rules="[{ pattern, message: 'Error message' }]"
   />
   <van-field
-    v-model="value2"
+    v-model="state.value2"
     name="validator"
     placeholder="Use validator"
     :rules="[{ validator, message: 'Error message' }]"
   />
   <van-field
-    v-model="value3"
+    v-model="state.value3"
     name="asyncValidator"
     placeholder="Use async validator"
     :rules="[{ validator: asyncValidator, message: 'Error message' }]"
@@ -86,23 +91,22 @@ export default {
 ```
 
 ```js
+import { reactive } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value1: '',
       value2: '',
       value3: '',
-      pattern: /\d{6}/,
-    };
-  },
-  methods: {
-    validator(val) {
-      return /1\d{10}/.test(val);
-    },
-    asyncValidator(val) {
-      return new Promise((resolve) => {
+    });
+    const pattern = /\d{6}/;
+
+    const validator = (val) => /1\d{10}/.test(val);
+
+    const asyncValidator = (val) =>
+      new Promise((resolve) => {
         Toast.loading('Validating...');
 
         setTimeout(() => {
@@ -110,10 +114,18 @@ export default {
           resolve(/\d{6}/.test(val));
         }, 1000);
       });
-    },
-    onFailed(errorInfo) {
+
+    const onFailed = (errorInfo) => {
       console.log('failed', errorInfo);
-    },
+    };
+
+    return {
+      state,
+      pattern,
+      onFailed,
+      validator,
+      asyncValidator,
+    };
   },
 };
 ```
@@ -123,17 +135,18 @@ export default {
 ```html
 <van-field name="switch" label="Switch">
   <template #input>
-    <van-switch v-model="switchChecked" size="20" />
+    <van-switch v-model="checked" size="20" />
   </template>
 </van-field>
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      switchChecked: false,
-    };
+  setup() {
+    const checked = ref(false);
+    return { checked };
   },
 };
 ```
@@ -143,12 +156,12 @@ export default {
 ```html
 <van-field name="checkbox" label="Checkbox">
   <template #input>
-    <van-checkbox v-model="checkbox" shape="square" />
+    <van-checkbox v-model="checked" shape="square" />
   </template>
 </van-field>
 <van-field name="checkboxGroup" label="CheckboxGroup">
   <template #input>
-    <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
+    <van-checkbox-group v-model="groupChecked" direction="horizontal">
       <van-checkbox name="1" shape="square">Checkbox 1</van-checkbox>
       <van-checkbox name="2" shape="square">Checkbox 2</van-checkbox>
     </van-checkbox-group>
@@ -157,11 +170,15 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const checked = ref(false);
+    const groupChecked = ref([]);
     return {
-      checkbox: false,
-      checkboxGroup: [],
+      checked,
+      groupChecked,
     };
   },
 };
@@ -172,7 +189,7 @@ export default {
 ```html
 <van-field name="radio" label="Radio">
   <template #input>
-    <van-radio-group v-model="radio" direction="horizontal">
+    <van-radio-group v-model="checked" direction="horizontal">
       <van-radio name="1">Radio 1</van-radio>
       <van-radio name="2">Radio 2</van-radio>
     </van-radio-group>
@@ -181,11 +198,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      radio: '1',
-    };
+  setup() {
+    const checked = ref('1');
+    return { checked };
   },
 };
 ```
@@ -195,17 +213,18 @@ export default {
 ```html
 <van-field name="stepper" label="Stepper">
   <template #input>
-    <van-stepper v-model="stepper" />
+    <van-stepper v-model="value" />
   </template>
 </van-field>
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      stepper: 1,
-    };
+  setup() {
+    const value = ref(1);
+    return { value };
   },
 };
 ```
@@ -215,17 +234,18 @@ export default {
 ```html
 <van-field name="rate" label="Rate">
   <template #input>
-    <van-rate v-model="rate" />
+    <van-rate v-model="value" />
   </template>
 </van-field>
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      rate: 3,
-    };
+  setup() {
+    const value = ref(3);
+    return { value };
   },
 };
 ```
@@ -235,17 +255,18 @@ export default {
 ```html
 <van-field name="slider" label="Slider">
   <template #input>
-    <van-slider v-model="slider" />
+    <van-slider v-model="value" />
   </template>
 </van-field>
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      slider: 50,
-    };
+  setup() {
+    const value = ref(50);
+    return { value };
   },
 };
 ```
@@ -255,17 +276,18 @@ export default {
 ```html
 <van-field name="uploader" label="Uploader">
   <template #input>
-    <van-uploader v-model="uploader" />
+    <van-uploader v-model="value" />
   </template>
 </van-field>
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
-    };
+  setup() {
+    const value = ref([{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }]);
+    return { value };
   },
 };
 ```
@@ -277,34 +299,41 @@ export default {
   readonly
   clickable
   name="picker"
-  :value="value"
+  :value="state.value"
   label="Picker"
   placeholder="Select city"
-  @click="showPicker = true"
+  @click="state.showPicker = true"
 />
-<van-popup v-model:show="showPicker" position="bottom">
+<van-popup v-model:show="state.showPicker" position="bottom">
   <van-picker
     :columns="columns"
     @confirm="onConfirm"
-    @cancel="showPicker = false"
+    @cancel="state.showPicker = false"
   />
 </van-popup>
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value: '',
-      columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
       showPicker: false,
+    });
+    const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'];
+
+    const onConfirm = (value) => {
+      state.value = value;
+      state.showPicker = false;
+    };
+
+    return {
+      state,
+      columns,
+      onConfirm,
     };
-  },
-  methods: {
-    onConfirm(value) {
-      this.value = value;
-      this.showPicker = false;
-    },
   },
 };
 ```
@@ -316,33 +345,38 @@ export default {
   readonly
   clickable
   name="datetimePicker"
-  :value="value"
+  :value="state.value"
   label="Datetime Picker"
   placeholder="Select time"
-  @click="showPicker = true"
+  @click="state.showPicker = true"
 />
-<van-popup v-model:show="showPicker" position="bottom">
+<van-popup v-model:show="state.showPicker" position="bottom">
   <van-datetime-picker
     type="time"
     @confirm="onConfirm"
-    @cancel="showPicker = false"
+    @cancel="state.showPicker = false"
   />
 </van-popup>
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value: '',
       showPicker: false,
+    });
+    const onConfirm = (value) => {
+      state.value = value;
+      state.showPicker = false;
+    };
+
+    return {
+      state,
+      onConfirm,
     };
-  },
-  methods: {
-    onConfirm(time) {
-      this.value = time;
-      this.showPicker = false;
-    },
   },
 };
 ```
@@ -354,37 +388,42 @@ export default {
   readonly
   clickable
   name="area"
-  :value="value"
+  :value="state.value"
   label="Area Picker"
   placeholder="Select area"
-  @click="showArea = true"
+  @click="state.showArea = true"
 />
-<van-popup v-model:show="showArea" position="bottom">
+<van-popup v-model:show="state.showArea" position="bottom">
   <van-area
     :area-list="areaList"
     @confirm="onConfirm"
-    @cancel="showArea = false"
+    @cancel="state.showArea = false"
   />
 </van-popup>
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value: '',
       showArea: false,
-      areaList: {},
-    };
-  },
-  methods: {
-    onConfirm(values) {
-      this.value = values
+    });
+    const onConfirm = (value) => {
+      state.showArea = false;
+      state.value = values
         .filter((item) => !!item)
         .map((item) => item.name)
         .join('/');
-      this.showArea = false;
-    },
+    };
+
+    return {
+      state,
+      areaList: {},
+      onConfirm,
+    };
   },
 };
 ```
@@ -396,27 +435,32 @@ export default {
   readonly
   clickable
   name="calendar"
-  :value="value"
+  :value="state.value"
   label="Calendar"
   placeholder="Select date"
-  @click="showCalendar = true"
+  @click="state.showCalendar = true"
 />
-<van-calendar v-model="showCalendar" @confirm="onConfirm" />
+<van-calendar v-model="state.showCalendar" @confirm="onConfirm" />
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value: '',
       showCalendar: false,
+    });
+    const onConfirm = (date) => {
+      state.value = `${date.getMonth() + 1}/${date.getDate()}`;
+      state.showCalendar = false;
+    };
+
+    return {
+      state,
+      onConfirm,
     };
-  },
-  methods: {
-    onConfirm(date) {
-      this.value = `${date.getMonth() + 1}/${date.getDate()}`;
-      this.showCalendar = false;
-    },
   },
 };
 ```
diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md
index e559fd8e7..04c4ded67 100644
--- a/src/form/README.zh-CN.md
+++ b/src/form/README.zh-CN.md
@@ -23,14 +23,14 @@ app.use(Form);
 ```html
 <van-form @submit="onSubmit">
   <van-field
-    v-model="username"
+    v-model="state.username"
     name="用户名"
     label="用户名"
     placeholder="用户名"
     :rules="[{ required: true, message: '请填写用户名' }]"
   />
   <van-field
-    v-model="password"
+    v-model="state.password"
     type="password"
     name="密码"
     label="密码"
@@ -44,17 +44,22 @@ app.use(Form);
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       username: '',
       password: '',
-    };
-  },
-  methods: {
-    onSubmit(values) {
+    });
+    const onSubmit = (values) => {
       console.log('submit', values);
-    },
+    };
+
+    return {
+      state,
+      onSubmit,
+    };
   },
 };
 ```
@@ -67,21 +72,21 @@ export default {
 <van-form validate-first @failed="onFailed">
   <!-- 通过 pattern 进行正则校验 -->
   <van-field
-    v-model="value1"
+    v-model="state.value1"
     name="pattern"
     placeholder="正则校验"
     :rules="[{ pattern, message: '请输入正确内容' }]"
   />
   <!-- 通过 validator 进行函数校验 -->
   <van-field
-    v-model="value2"
+    v-model="state.value2"
     name="validator"
     placeholder="函数校验"
     :rules="[{ validator, message: '请输入正确内容' }]"
   />
   <!-- 通过 validator 进行异步函数校验 -->
   <van-field
-    v-model="value3"
+    v-model="state.value3"
     name="asyncValidator"
     placeholder="异步函数校验"
     :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
@@ -95,25 +100,24 @@ export default {
 ```
 
 ```js
+import { reactive } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value1: '',
       value2: '',
       value3: '',
-      pattern: /\d{6}/,
-    };
-  },
-  methods: {
+    });
+    const pattern = /\d{6}/;
+
     // 校验函数返回 true 表示校验通过，false 表示不通过
-    validator(val) {
-      return /1\d{10}/.test(val);
-    },
+    const validator = (val) => /1\d{10}/.test(val);
+
     // 异步校验函数返回 Promise
-    asyncValidator(val) {
-      return new Promise((resolve) => {
+    const asyncValidator = (val) =>
+      new Promise((resolve) => {
         Toast.loading('验证中...');
 
         setTimeout(() => {
@@ -121,10 +125,18 @@ export default {
           resolve(/\d{6}/.test(val));
         }, 1000);
       });
-    },
-    onFailed(errorInfo) {
+
+    const onFailed = (errorInfo) => {
       console.log('failed', errorInfo);
-    },
+    };
+
+    return {
+      state,
+      pattern,
+      onFailed,
+      validator,
+      asyncValidator,
+    };
   },
 };
 ```
@@ -136,17 +148,18 @@ export default {
 ```html
 <van-field name="switch" label="开关">
   <template #input>
-    <van-switch v-model="switchChecked" size="20" />
+    <van-switch v-model="checked" size="20" />
   </template>
 </van-field>
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      switchChecked: false,
-    };
+  setup() {
+    const checked = ref(false);
+    return { checked };
   },
 };
 ```
@@ -158,12 +171,12 @@ export default {
 ```html
 <van-field name="checkbox" label="复选框">
   <template #input>
-    <van-checkbox v-model="checkbox" shape="square" />
+    <van-checkbox v-model="checked" shape="square" />
   </template>
 </van-field>
 <van-field name="checkboxGroup" label="复选框组">
   <template #input>
-    <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
+    <van-checkbox-group v-model="groupChecked" direction="horizontal">
       <van-checkbox name="1" shape="square">复选框 1</van-checkbox>
       <van-checkbox name="2" shape="square">复选框 2</van-checkbox>
     </van-checkbox-group>
@@ -172,11 +185,15 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const checked = ref(false);
+    const groupChecked = ref([]);
     return {
-      checkbox: false,
-      checkboxGroup: [],
+      checked,
+      groupChecked,
     };
   },
 };
@@ -189,7 +206,7 @@ export default {
 ```html
 <van-field name="radio" label="单选框">
   <template #input>
-    <van-radio-group v-model="radio" direction="horizontal">
+    <van-radio-group v-model="checked" direction="horizontal">
       <van-radio name="1">单选框 1</van-radio>
       <van-radio name="2">单选框 2</van-radio>
     </van-radio-group>
@@ -198,11 +215,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      radio: '1',
-    };
+  setup() {
+    const checked = ref('1');
+    return { checked };
   },
 };
 ```
@@ -214,17 +232,18 @@ export default {
 ```html
 <van-field name="stepper" label="步进器">
   <template #input>
-    <van-stepper v-model="stepper" />
+    <van-stepper v-model="value" />
   </template>
 </van-field>
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      stepper: 1,
-    };
+  setup() {
+    const value = ref(1);
+    return { value };
   },
 };
 ```
@@ -236,17 +255,18 @@ export default {
 ```html
 <van-field name="rate" label="评分">
   <template #input>
-    <van-rate v-model="rate" />
+    <van-rate v-model="value" />
   </template>
 </van-field>
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      rate: 3,
-    };
+  setup() {
+    const value = ref(3);
+    return { value };
   },
 };
 ```
@@ -258,17 +278,18 @@ export default {
 ```html
 <van-field name="slider" label="滑块">
   <template #input>
-    <van-slider v-model="slider" />
+    <van-slider v-model="value" />
   </template>
 </van-field>
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      slider: 50,
-    };
+  setup() {
+    const value = ref(50);
+    return { value };
   },
 };
 ```
@@ -280,17 +301,18 @@ export default {
 ```html
 <van-field name="uploader" label="文件上传">
   <template #input>
-    <van-uploader v-model="uploader" />
+    <van-uploader v-model="value" />
   </template>
 </van-field>
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
-    };
+  setup() {
+    const value = ref([{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }]);
+    return { value };
   },
 };
 ```
@@ -304,34 +326,41 @@ export default {
   readonly
   clickable
   name="picker"
-  :value="value"
+  :value="state.value"
   label="选择器"
   placeholder="点击选择城市"
-  @click="showPicker = true"
+  @click="state.showPicker = true"
 />
-<van-popup v-model:show="showPicker" position="bottom">
+<van-popup v-model:show="state.showPicker" position="bottom">
   <van-picker
     :columns="columns"
     @confirm="onConfirm"
-    @cancel="showPicker = false"
+    @cancel="state.showPicker = false"
   />
 </van-popup>
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value: '',
-      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
       showPicker: false,
+    });
+    const columns = ['杭州', '宁波', '温州', '嘉兴', '湖州'];
+
+    const onConfirm = (value) => {
+      state.value = value;
+      state.showPicker = false;
+    };
+
+    return {
+      state,
+      columns,
+      onConfirm,
     };
-  },
-  methods: {
-    onConfirm(value) {
-      this.value = value;
-      this.showPicker = false;
-    },
   },
 };
 ```
@@ -345,33 +374,38 @@ export default {
   readonly
   clickable
   name="datetimePicker"
-  :value="value"
+  :value="state.value"
   label="时间选择"
   placeholder="点击选择时间"
-  @click="showPicker = true"
+  @click="state.showPicker = true"
 />
-<van-popup v-model:show="showPicker" position="bottom">
+<van-popup v-model:show="state.showPicker" position="bottom">
   <van-datetime-picker
     type="time"
     @confirm="onConfirm"
-    @cancel="showPicker = false"
+    @cancel="state.showPicker = false"
   />
 </van-popup>
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value: '',
       showPicker: false,
+    });
+    const onConfirm = (value) => {
+      state.value = value;
+      state.showPicker = false;
+    };
+
+    return {
+      state,
+      onConfirm,
     };
-  },
-  methods: {
-    onConfirm(time) {
-      this.value = time;
-      this.showPicker = false;
-    },
   },
 };
 ```
@@ -385,37 +419,42 @@ export default {
   readonly
   clickable
   name="area"
-  :value="value"
+  :value="state.value"
   label="地区选择"
   placeholder="点击选择省市区"
-  @click="showArea = true"
+  @click="state.showArea = true"
 />
-<van-popup v-model:show="showArea" position="bottom">
+<van-popup v-model:show="state.showArea" position="bottom">
   <van-area
     :area-list="areaList"
     @confirm="onConfirm"
-    @cancel="showArea = false"
+    @cancel="state.showArea = false"
   />
 </van-popup>
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value: '',
       showArea: false,
-      areaList: {}, // 数据格式见 Area 组件文档
-    };
-  },
-  methods: {
-    onConfirm(values) {
-      this.value = values
+    });
+    const onConfirm = (value) => {
+      state.showArea = false;
+      state.value = values
         .filter((item) => !!item)
         .map((item) => item.name)
         .join('/');
-      this.showArea = false;
-    },
+    };
+
+    return {
+      state,
+      areaList: {}, // 数据格式见 Area 组件文档
+      onConfirm,
+    };
   },
 };
 ```
@@ -429,27 +468,32 @@ export default {
   readonly
   clickable
   name="calendar"
-  :value="value"
+  :value="state.value"
   label="日历"
   placeholder="点击选择日期"
-  @click="showCalendar = true"
+  @click="state.showCalendar = true"
 />
-<van-calendar v-model="showCalendar" @confirm="onConfirm" />
+<van-calendar v-model="state.showCalendar" @confirm="onConfirm" />
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value: '',
       showCalendar: false,
+    });
+    const onConfirm = (date) => {
+      state.value = `${date.getMonth() + 1}/${date.getDate()}`;
+      state.showCalendar = false;
+    };
+
+    return {
+      state,
+      onConfirm,
     };
-  },
-  methods: {
-    onConfirm(date) {
-      this.value = `${date.getMonth() + 1}/${date.getDate()}`;
-      this.showCalendar = false;
-    },
   },
 };
 ```
diff --git a/src/form/demo/BasicUsage.vue b/src/form/demo/BasicUsage.vue
index 1e1588774..c6f15be04 100644
--- a/src/form/demo/BasicUsage.vue
+++ b/src/form/demo/BasicUsage.vue
@@ -16,7 +16,7 @@
         :rules="[{ required: true, message: t('requirePassword') }]"
         :placeholder="t('password')"
       />
-      <div style="margin: 16px 16px 0;">
+      <div style="margin: 16px 16px 0">
         <van-button round block type="primary" native-type="submit">
           {{ t('submit') }}
         </van-button>
@@ -26,38 +26,47 @@
 </template>
 
 <script>
-export default {
-  i18n: {
-    'zh-CN': {
-      submit: '提交',
-      username: '用户名',
-      password: '密码',
-      requireUsername: '请填写用户名',
-      requirePassword: '请填写密码',
-    },
-    'en-US': {
-      submit: 'Submit',
-      username: 'Username',
-      password: 'Password',
-      requireUsername: 'Username is required',
-      requirePassword: 'Password is required',
-    },
-  },
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-  data() {
-    return {
+const i18n = {
+  'zh-CN': {
+    submit: '提交',
+    username: '用户名',
+    password: '密码',
+    requireUsername: '请填写用户名',
+    requirePassword: '请填写密码',
+  },
+  'en-US': {
+    submit: 'Submit',
+    username: 'Username',
+    password: 'Password',
+    requireUsername: 'Username is required',
+    requirePassword: 'Password is required',
+  },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       username: '',
       password: '',
-    };
-  },
+    });
 
-  methods: {
-    onSubmit(values) {
+    const onSubmit = (values) => {
       console.log('submit', values);
-    },
-    onFailed(errorInfo) {
+    };
+    const onFailed = (errorInfo) => {
       console.log('failed', errorInfo);
-    },
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      onSubmit,
+      onFailed,
+    };
   },
 };
 </script>
diff --git a/src/form/demo/FieldType.vue b/src/form/demo/FieldType.vue
index 01454a82c..ae8ea1a29 100644
--- a/src/form/demo/FieldType.vue
+++ b/src/form/demo/FieldType.vue
@@ -64,7 +64,7 @@
       <field-type-area />
       <field-type-calendar />
 
-      <div style="margin: 16px 16px 0;">
+      <div style="margin: 16px 16px 0">
         <van-button round block type="primary" native-type="submit">
           {{ t('submit') }}
         </van-button>
@@ -74,43 +74,45 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 import FieldTypeArea from './FieldTypeArea';
 import FieldTypePicker from './FieldTypePicker';
 import FieldTypeCalendar from './FieldTypeCalendar';
 import FieldTypeDatetimePicker from './FieldTypeDatetimePicker';
 
-export default {
-  i18n: {
-    'zh-CN': {
-      rate: '评分',
-      radio: '单选框',
-      submit: '提交',
-      switch: '开关',
-      slider: '滑块',
-      picker: '选择器',
-      stepper: '步进器',
-      checkbox: '复选框',
-      uploader: '文件上传',
-      fieldType: '表单项类型',
-      checkboxGroup: '复选框组',
-      requireCheckbox: '请勾选复选框',
-    },
-    'en-US': {
-      rate: 'Rate',
-      radio: 'Radio',
-      submit: 'Submit',
-      switch: 'Switch',
-      slider: 'Slider',
-      picker: 'Picker',
-      stepper: 'Stepper',
-      checkbox: 'Checkbox',
-      uploader: 'Uploader',
-      fieldType: 'Field Type',
-      checkboxGroup: 'Checkbox Group',
-      requireCheckbox: 'Checkbox is required',
-    },
+const i18n = {
+  'zh-CN': {
+    rate: '评分',
+    radio: '单选框',
+    submit: '提交',
+    switch: '开关',
+    slider: '滑块',
+    picker: '选择器',
+    stepper: '步进器',
+    checkbox: '复选框',
+    uploader: '文件上传',
+    fieldType: '表单项类型',
+    checkboxGroup: '复选框组',
+    requireCheckbox: '请勾选复选框',
   },
+  'en-US': {
+    rate: 'Rate',
+    radio: 'Radio',
+    submit: 'Submit',
+    switch: 'Switch',
+    slider: 'Slider',
+    picker: 'Picker',
+    stepper: 'Stepper',
+    checkbox: 'Checkbox',
+    uploader: 'Uploader',
+    fieldType: 'Field Type',
+    checkboxGroup: 'Checkbox Group',
+    requireCheckbox: 'Checkbox is required',
+  },
+};
 
+export default {
   components: {
     FieldTypeArea,
     FieldTypePicker,
@@ -118,8 +120,9 @@ export default {
     FieldTypeDatetimePicker,
   },
 
-  data() {
-    return {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       rate: 3,
       radio: '1',
       slider: 50,
@@ -128,13 +131,17 @@ export default {
       checkbox: false,
       checkboxGroup: [],
       switchChecked: false,
-    };
-  },
+    });
 
-  methods: {
-    onSubmit(values) {
+    const onSubmit = (values) => {
       console.log(values);
-    },
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      onSubmit,
+    };
   },
 };
 </script>
diff --git a/src/form/demo/FieldTypeArea.vue b/src/form/demo/FieldTypeArea.vue
index 9dbf6d306..d031f47a3 100644
--- a/src/form/demo/FieldTypeArea.vue
+++ b/src/form/demo/FieldTypeArea.vue
@@ -18,42 +18,50 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 import AreaList from '../../area/demo/area';
 import AreaListEn from '../../area/demo/area-en';
 
-export default {
-  i18n: {
-    'zh-CN': {
-      picker: '地区选择',
-      areaList: AreaList,
-      placeholder: '点击选择省市区',
-    },
-    'en-US': {
-      picker: 'Area Picker',
-      areaList: AreaListEn,
-      placeholder: 'Select area',
-    },
+const i18n = {
+  'zh-CN': {
+    picker: '地区选择',
+    areaList: AreaList,
+    placeholder: '点击选择省市区',
   },
+  'en-US': {
+    picker: 'Area Picker',
+    areaList: AreaListEn,
+    placeholder: 'Select area',
+  },
+};
 
-  data() {
-    return {
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       value: '',
       showArea: false,
-    };
-  },
+    });
 
-  methods: {
-    onConfirm(values) {
-      this.value = values
+    const onConfirm = (values) => {
+      state.value = values
         .filter((item) => !!item)
         .map((item) => item.name)
         .join('/');
-      this.showArea = false;
-    },
+      state.showArea = false;
+    };
 
-    onCancel() {
-      this.showArea = false;
-    },
+    const onCancel = () => {
+      state.showArea = false;
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      onCancel,
+      onConfirm,
+    };
   },
 };
 </script>
diff --git a/src/form/demo/FieldTypeCalendar.vue b/src/form/demo/FieldTypeCalendar.vue
index 3725901d1..208e9242e 100644
--- a/src/form/demo/FieldTypeCalendar.vue
+++ b/src/form/demo/FieldTypeCalendar.vue
@@ -17,34 +17,40 @@
 </template>
 
 <script>
-export default {
-  i18n: {
-    'zh-CN': {
-      calendar: '日历',
-      placeholder: '点击选择日期',
-    },
-    'en-US': {
-      calendar: 'Calendar',
-      placeholder: 'Select date',
-    },
-  },
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-  data() {
-    return {
+const i18n = {
+  'zh-CN': {
+    calendar: '日历',
+    placeholder: '点击选择日期',
+  },
+  'en-US': {
+    calendar: 'Calendar',
+    placeholder: 'Select date',
+  },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       value: '',
       showCalendar: false,
+    });
+
+    const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
+
+    const onConfirm = (date) => {
+      state.value = formatDate(date);
+      state.showCalendar = false;
     };
-  },
 
-  methods: {
-    formatDate(date) {
-      return `${date.getMonth() + 1}/${date.getDate()}`;
-    },
-
-    onConfirm(date) {
-      this.value = this.formatDate(date);
-      this.showCalendar = false;
-    },
+    return {
+      ...toRefs(state),
+      t,
+      onConfirm,
+    };
   },
 };
 </script>
diff --git a/src/form/demo/FieldTypeDatetimePicker.vue b/src/form/demo/FieldTypeDatetimePicker.vue
index e8123b4ae..cc89fdf28 100644
--- a/src/form/demo/FieldTypeDatetimePicker.vue
+++ b/src/form/demo/FieldTypeDatetimePicker.vue
@@ -14,34 +14,42 @@
 </template>
 
 <script>
-export default {
-  i18n: {
-    'zh-CN': {
-      label: '时间选择',
-      placeholder: '点击选择时间',
-    },
-    'en-US': {
-      label: 'Datetime Picker',
-      placeholder: 'Select time',
-    },
-  },
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-  data() {
-    return {
+const i18n = {
+  'zh-CN': {
+    label: '时间选择',
+    placeholder: '点击选择时间',
+  },
+  'en-US': {
+    label: 'Datetime Picker',
+    placeholder: 'Select time',
+  },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       value: '',
       showPicker: false,
-    };
-  },
+    });
 
-  methods: {
-    onConfirm(time) {
-      console.log('time', time);
-      this.value = time;
-      this.showPicker = false;
-    },
-    onCancel() {
-      this.showPicker = false;
-    },
+    const onConfirm = (time) => {
+      state.value = time;
+      state.showPicker = false;
+    };
+    const onCancel = () => {
+      state.showPicker = false;
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      onCancel,
+      onConfirm,
+    };
   },
 };
 </script>
diff --git a/src/form/demo/FieldTypePicker.vue b/src/form/demo/FieldTypePicker.vue
index d78630680..8b946fe92 100644
--- a/src/form/demo/FieldTypePicker.vue
+++ b/src/form/demo/FieldTypePicker.vue
@@ -18,36 +18,45 @@
 </template>
 
 <script>
-export default {
-  i18n: {
-    'zh-CN': {
-      picker: '选择器',
-      placeholder: '点击选择城市',
-      textColumns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
-    },
-    'en-US': {
-      picker: 'Picker',
-      placeholder: 'Select city',
-      textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
-    },
-  },
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-  data() {
-    return {
+const i18n = {
+  'zh-CN': {
+    picker: '选择器',
+    placeholder: '点击选择城市',
+    textColumns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+  },
+  'en-US': {
+    picker: 'Picker',
+    placeholder: 'Select city',
+    textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+  },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       value: '',
       showPicker: false,
+    });
+
+    const onConfirm = (value) => {
+      state.value = value;
+      state.showPicker = false;
     };
-  },
 
-  methods: {
-    onConfirm(value) {
-      this.value = value;
-      this.showPicker = false;
-    },
+    const onCancel = () => {
+      state.showPicker = false;
+    };
 
-    onCancel() {
-      this.showPicker = false;
-    },
+    return {
+      ...toRefs(state),
+      t,
+      onCancel,
+      onConfirm,
+    };
   },
 };
 </script>
diff --git a/src/form/demo/ValidateRules.vue b/src/form/demo/ValidateRules.vue
index a17a3a91f..0019c16b5 100644
--- a/src/form/demo/ValidateRules.vue
+++ b/src/form/demo/ValidateRules.vue
@@ -22,7 +22,7 @@
         :rules="[{ validator: asyncValidator, message: t('message') }]"
         :placeholder="t('asyncValidator')"
       />
-      <div style="margin: 16px 16px 0;">
+      <div style="margin: 16px 16px 0">
         <van-button round block type="primary" native-type="submit">
           {{ t('submit') }}
         </van-button>
@@ -32,62 +32,71 @@
 </template>
 
 <script>
-export default {
-  i18n: {
-    'zh-CN': {
-      label: '文本',
-      title: '校验规则',
-      submit: '提交',
-      message: '请输入正确内容',
-      pattern: '正则校验',
-      validator: '函数校验',
-      validating: '验证中...',
-      asyncValidator: '异步函数校验',
-    },
-    'en-US': {
-      label: 'Label',
-      title: 'Validate Rules',
-      submit: 'Submit',
-      message: 'Error message',
-      pattern: 'Use pattern',
-      validator: 'Use validator',
-      validating: 'Validating...',
-      asyncValidator: 'Use async validator',
-    },
-  },
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import Toast from '../../toast';
 
-  data() {
-    return {
+const i18n = {
+  'zh-CN': {
+    label: '文本',
+    title: '校验规则',
+    submit: '提交',
+    message: '请输入正确内容',
+    pattern: '正则校验',
+    validator: '函数校验',
+    validating: '验证中...',
+    asyncValidator: '异步函数校验',
+  },
+  'en-US': {
+    label: 'Label',
+    title: 'Validate Rules',
+    submit: 'Submit',
+    message: 'Error message',
+    pattern: 'Use pattern',
+    validator: 'Use validator',
+    validating: 'Validating...',
+    asyncValidator: 'Use async validator',
+  },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       value1: '',
       value2: '',
       value3: '',
-      pattern: /\d{6}/,
-    };
-  },
+    });
 
-  methods: {
-    validator(val) {
-      return /1\d{10}/.test(val);
-    },
+    const validator = (val) => /1\d{10}/.test(val);
 
-    asyncValidator(val) {
-      return new Promise((resolve) => {
-        this.$toast.loading(this.t('validating'));
+    const asyncValidator = (val) =>
+      new Promise((resolve) => {
+        Toast.loading(t('validating'));
 
         setTimeout(() => {
-          this.$toast.clear();
+          Toast.clear();
           resolve(val === '1234');
         }, 1000);
       });
-    },
 
-    onSubmit(values) {
+    const onSubmit = (values) => {
       console.log('submit', values);
-    },
+    };
 
-    onFailed(errorInfo) {
+    const onFailed = (errorInfo) => {
       console.log('failed', errorInfo);
-    },
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      pattern: /\d{6}/,
+      onSubmit,
+      onFailed,
+      validator,
+      asyncValidator,
+    };
   },
 };
 </script>