diff --git a/src/field/README.md b/src/field/README.md
index ecf5367e2..52fd4f4d7 100644
--- a/src/field/README.md
+++ b/src/field/README.md
@@ -38,15 +38,15 @@ export default {
 Use `type` prop to custom different type fields.
 
 ```html
-<van-field v-model="text" label="Text" />
-<van-field v-model="tel" type="tel" label="Phone" />
-<van-field v-model="digit" type="digit" label="Digit" />
-<van-field v-model="number" type="number" label="Number" />
-<van-field v-model="password" type="password" label="Password" />
+<van-field v-model="state.text" label="Text" />
+<van-field v-model="state.tel" type="tel" label="Phone" />
+<van-field v-model="state.digit" type="digit" label="Digit" />
+<van-field v-model="state.number" type="number" label="Number" />
+<van-field v-model="state.password" type="password" label="Password" />
 ```
 
 ```js
-import { reactive, toRefs } from 'vue';
+import { reactive } from 'vue';
 
 export default {
   setup() {
@@ -58,9 +58,7 @@ export default {
       password: '',
     });
 
-    return {
-      ...toRefs(state),
-    };
+    return { state };
   },
 };
 ```
@@ -79,14 +77,14 @@ export default {
 ```html
 <van-cell-group>
   <van-field
-    v-model="value1"
+    v-model="state.value1"
     label="Text"
     left-icon="smile-o"
     right-icon="warning-o"
     placeholder="Show Icon"
   />
   <van-field
-    v-model="value2"
+    v-model="state.value2"
     clearable
     label="Text"
     left-icon="music-o"
@@ -96,7 +94,7 @@ export default {
 ```
 
 ```js
-import { reactive, toRefs } from 'vue';
+import { reactive } from 'vue';
 
 export default {
   setup() {
@@ -105,9 +103,7 @@ export default {
       value2: '123',
     });
 
-    return {
-      ...toRefs(state),
-    };
+    return { state };
   },
 };
 ```
@@ -153,13 +149,13 @@ Use `formatter` prop to format the input value.
 
 ```html
 <van-field
-  v-model="value1"
+  v-model="state.value1"
   label="Text"
   :formatter="formatter"
   placeholder="Format On Change"
 />
 <van-field
-  v-model="value2"
+  v-model="state.value2"
   label="Text"
   :formatter="formatter"
   format-trigger="onBlur"
@@ -168,7 +164,7 @@ Use `formatter` prop to format the input value.
 ```
 
 ```js
-import { reactive, toRefs } from 'vue';
+import { reactive } from 'vue';
 
 export default {
   setup() {
@@ -179,7 +175,7 @@ export default {
     const formatter = (value) => value.replace(/\d/g, '');
 
     return {
-      ...toRefs(state),
+      state,
       formatter,
     };
   },
diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md
index 900d7ebac..51ffbede7 100644
--- a/src/field/README.zh-CN.md
+++ b/src/field/README.zh-CN.md
@@ -44,19 +44,19 @@ export default {
 
 ```html
 <!-- 输入任意文本 -->
-<van-field v-model="text" label="文本" />
+<van-field v-model="state.text" label="文本" />
 <!-- 输入手机号，调起手机号键盘 -->
-<van-field v-model="tel" type="tel" label="手机号" />
+<van-field v-model="state.tel" type="tel" label="手机号" />
 <!-- 允许输入正整数，调起纯数字键盘 -->
-<van-field v-model="digit" type="digit" label="整数" />
+<van-field v-model="state.digit" type="digit" label="整数" />
 <!-- 允许输入数字，调起带符号的纯数字键盘 -->
-<van-field v-model="number" type="number" label="数字" />
+<van-field v-model="state.number" type="number" label="数字" />
 <!-- 输入密码 -->
-<van-field v-model="password" type="password" label="密码" />
+<van-field v-model="state.password" type="password" label="密码" />
 ```
 
 ```js
-import { reactive, toRefs } from 'vue';
+import { reactive } from 'vue';
 
 export default {
   setup() {
@@ -68,9 +68,7 @@ export default {
       password: '',
     });
 
-    return {
-      ...toRefs(state),
-    };
+    return { state };
   },
 };
 ```
@@ -95,14 +93,14 @@ export default {
 ```html
 <van-cell-group>
   <van-field
-    v-model="value1"
+    v-model="state.value1"
     label="文本"
     left-icon="smile-o"
     right-icon="warning-o"
     placeholder="显示图标"
   />
   <van-field
-    v-model="value2"
+    v-model="state.value2"
     clearable
     label="文本"
     left-icon="music-o"
@@ -112,7 +110,7 @@ export default {
 ```
 
 ```js
-import { reactive, toRefs } from 'vue';
+import { reactive } from 'vue';
 
 export default {
   setup() {
@@ -121,9 +119,7 @@ export default {
       value2: '123',
     });
 
-    return {
-      ...toRefs(state),
-    };
+    return { state };
   },
 };
 ```
@@ -175,13 +171,13 @@ export default {
 
 ```html
 <van-field
-  v-model="value1"
+  v-model="state.value1"
   label="文本"
   :formatter="formatter"
   placeholder="在输入时执行格式化"
 />
 <van-field
-  v-model="value2"
+  v-model="state.value2"
   label="文本"
   :formatter="formatter"
   format-trigger="onBlur"
@@ -190,7 +186,7 @@ export default {
 ```
 
 ```js
-import { reactive, toRefs } from 'vue';
+import { reactive } from 'vue';
 
 export default {
   setup() {
@@ -202,7 +198,7 @@ export default {
     const formatter = (value) => value.replace(/\d/g, '');
 
     return {
-      ...toRefs(state),
+      state,
       formatter,
     };
   },
diff --git a/src/image-preview/README.md b/src/image-preview/README.md
index 010ca2d88..4056bfc7b 100644
--- a/src/image-preview/README.md
+++ b/src/image-preview/README.md
@@ -82,13 +82,17 @@ setTimeout(() => {
 ### Component Call
 
 ```html
-<van-image-preview v-model:show="show" :images="images" @change="onChange">
+<van-image-preview
+  v-model:show="state.show"
+  :images="state.images"
+  @change="onChange"
+>
   <template v-slot:index>Page: {{ index }}</template>
 </van-image-preview>
 ```
 
 ```js
-import { reactive, toRefs } from 'vue';
+import { reactive } from 'vue';
 
 export default {
   setup() {
@@ -101,7 +105,7 @@ export default {
     };
 
     return {
-      ...toRefs(state),
+      state,
       images: [
         'https://img.yzcdn.cn/vant/apple-1.jpg',
         'https://img.yzcdn.cn/vant/apple-2.jpg',
diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md
index a13243017..7c6ffadf7 100644
--- a/src/image-preview/README.zh-CN.md
+++ b/src/image-preview/README.zh-CN.md
@@ -117,13 +117,17 @@ setTimeout(() => {
 如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `app.use` 注册组件。
 
 ```html
-<van-image-preview v-model:show="show" :images="images" @change="onChange">
+<van-image-preview
+  v-model:show="state.show"
+  :images="state.images"
+  @change="onChange"
+>
   <template v-slot:index>第{{ index }}页</template>
 </van-image-preview>
 ```
 
 ```js
-import { reactive, toRefs } from 'vue';
+import { reactive } from 'vue';
 
 export default {
   setup() {
@@ -136,7 +140,7 @@ export default {
     };
 
     return {
-      ...toRefs(state),
+      state,
       images: [
         'https://img.yzcdn.cn/vant/apple-1.jpg',
         'https://img.yzcdn.cn/vant/apple-2.jpg',