diff --git a/src/checkbox/README.md b/src/checkbox/README.md
index 72edb853c..6791db64e 100644
--- a/src/checkbox/README.md
+++ b/src/checkbox/README.md
@@ -20,10 +20,13 @@ app.use(CheckboxGroup);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const checked = ref(true);
     return {
-      checked: true,
+      checked,
     };
   },
 };
@@ -73,12 +76,17 @@ Use icon slot to custom icon.
 ```
 
 ```js
+import { toRefs, reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       checked: true,
       activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
       inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
+    });
+    return {
+      ...toRefs(state),
     };
   },
 };
@@ -95,18 +103,19 @@ export default {
 When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
 
 ```html
-<van-checkbox-group v-model="result">
+<van-checkbox-group v-model="checked">
   <van-checkbox name="a">Checkbox a</van-checkbox>
   <van-checkbox name="b">Checkbox b</van-checkbox>
 </van-checkbox-group>
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      result: ['a', 'b'],
-    };
+  setup() {
+    const checked = ref(['a', 'b']);
+    return { checked };
   },
 };
 ```
@@ -114,18 +123,19 @@ export default {
 ### Horizontal
 
 ```html
-<van-checkbox-group v-model="result" direction="horizontal">
+<van-checkbox-group v-model="checked" direction="horizontal">
   <van-checkbox name="a">Checkbox a</van-checkbox>
   <van-checkbox name="b">Checkbox b</van-checkbox>
 </van-checkbox-group>
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      result: [],
-    };
+  setup() {
+    const checked = ref([]);
+    return { checked };
   },
 };
 ```
@@ -143,7 +153,7 @@ export default {
 ### Toggle All
 
 ```html
-<van-checkbox-group v-model="result" ref="checkboxGroup">
+<van-checkbox-group v-model="checked" ref="checkboxGroup">
   <van-checkbox name="a">Checkbox a</van-checkbox>
   <van-checkbox name="b">Checkbox b</van-checkbox>
   <van-checkbox name="c">Checkbox c</van-checkbox>
@@ -154,27 +164,34 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const checked = ref([]);
+    const checkboxGroup = ref(null);
+
+    const checkAll = () => {
+      checkboxGroup.value.toggleAll(true);
+    }
+    const toggleAll = () => {
+      checkboxGroup.value.toggleAll();
+    },
+
     return {
-      result: [],
+      checked,
+      checkAll,
+      toggleAll,
+      checkboxGroup,
     };
   },
-  methods: {
-    checkAll() {
-      this.$refs.checkboxGroup.toggleAll(true);
-    },
-    toggleAll() {
-      this.$refs.checkboxGroup.toggleAll();
-    },
-  },
 };
 ```
 
 ### Inside a Cell
 
 ```html
-<van-checkbox-group v-model="result">
+<van-checkbox-group v-model="checked">
   <van-cell-group>
     <van-cell
       v-for="(item, index) in list"
@@ -186,7 +203,7 @@ export default {
       <template #right-icon>
         <van-checkbox
           :name="item"
-          :ref="el => checkboxes[index] = el"
+          :ref="el => checkboxRefs[index] = el"
           @click.stop
         />
       </template>
@@ -200,21 +217,21 @@ import { ref, onBeforeUpdate } from 'vue';
 
 export default {
   setup() {
-    const result = ref([]);
-    const checkboxes = ref([]);
+    const checked = ref([]);
+    const checkboxRefs = ref([]);
     const toggle = (index) => {
-      checkboxes.value[index].toggle();
+      checkboxRefs.value[index].toggle();
     };
 
     onBeforeUpdate(() => {
-      checkboxes.value = [];
+      checkboxRefs.value = [];
     });
 
     return {
       list: ['a', 'b'],
-      result,
       toggle,
-      checkboxes,
+      checked,
+      checkboxRefs,
     };
   },
 };
diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md
index d84d83ae1..73fe9ce46 100644
--- a/src/checkbox/README.zh-CN.md
+++ b/src/checkbox/README.zh-CN.md
@@ -26,11 +26,12 @@ app.use(CheckboxGroup);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      checked: true,
-    };
+  setup() {
+    const checked = ref(true);
+    return { checked };
   },
 };
 ```
@@ -87,12 +88,17 @@ export default {
 ```
 
 ```js
+import { toRefs, reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       checked: true,
       activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
       inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
+    });
+    return {
+      ...toRefs(state),
     };
   },
 };
@@ -111,18 +117,19 @@ export default {
 复选框可以与复选框组一起使用，复选框组通过 `v-model` 数组绑定复选框的勾选状态。
 
 ```html
-<van-checkbox-group v-model="result">
+<van-checkbox-group v-model="checked">
   <van-checkbox name="a">复选框 a</van-checkbox>
   <van-checkbox name="b">复选框 b</van-checkbox>
 </van-checkbox-group>
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      result: ['a', 'b'],
-    };
+  setup() {
+    const checked = ref(['a', 'b']);
+    return { checked };
   },
 };
 ```
@@ -132,18 +139,19 @@ export default {
 将 `direction` 属性设置为 `horizontal` 后，复选框组会变成水平排列。
 
 ```html
-<van-checkbox-group v-model="result" direction="horizontal">
+<van-checkbox-group v-model="checked" direction="horizontal">
   <van-checkbox name="a">复选框 a</van-checkbox>
   <van-checkbox name="b">复选框 b</van-checkbox>
 </van-checkbox-group>
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      result: [],
-    };
+  setup() {
+    const checked = ref([]);
+    return { checked };
   },
 };
 ```
@@ -176,20 +184,27 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const checked = ref([]);
+    const checkboxGroup = ref(null);
+
+    const checkAll = () => {
+      checkboxGroup.value.toggleAll(true);
+    }
+    const toggleAll = () => {
+      checkboxGroup.value.toggleAll();
+    },
+
     return {
-      result: [],
+      checked,
+      checkAll,
+      toggleAll,
+      checkboxGroup,
     };
   },
-  methods: {
-    checkAll() {
-      this.$refs.checkboxGroup.toggleAll(true);
-    },
-    toggleAll() {
-      this.$refs.checkboxGroup.toggleAll();
-    },
-  },
 };
 ```
 
@@ -198,7 +213,7 @@ export default {
 此时你需要再引入 `Cell` 和 `CellGroup` 组件，并通过 `Checkbox` 实例上的 toggle 方法触发切换。
 
 ```html
-<van-checkbox-group v-model="result">
+<van-checkbox-group v-model="checked">
   <van-cell-group>
     <van-cell
       v-for="(item, index) in list"
@@ -210,7 +225,7 @@ export default {
       <template #right-icon>
         <van-checkbox
           :name="item"
-          :ref="el => checkboxes[index] = el"
+          :ref="el => checkboxRefs[index] = el"
           @click.stop
         />
       </template>
@@ -224,21 +239,21 @@ import { ref, onBeforeUpdate } from 'vue';
 
 export default {
   setup() {
-    const result = ref([]);
-    const checkboxes = ref([]);
+    const checked = ref([]);
+    const checkboxRefs = ref([]);
     const toggle = (index) => {
-      checkboxes.value[index].toggle();
+      checkboxRefs.value[index].toggle();
     };
 
     onBeforeUpdate(() => {
-      checkboxes.value = [];
+      checkboxRefs.value = [];
     });
 
     return {
       list: ['a', 'b'],
-      result,
       toggle,
-      checkboxes,
+      checked,
+      checkboxRefs,
     };
   },
 };
diff --git a/src/checkbox/demo/index.vue b/src/checkbox/demo/index.vue
index 61951f3b5..419f84ee8 100644
--- a/src/checkbox/demo/index.vue
+++ b/src/checkbox/demo/index.vue
@@ -104,7 +104,7 @@
 </template>
 
 <script>
-import { ref } from 'vue';
+import { ref, reactive, toRefs } from 'vue';
 import { useRefs } from '../../composables/use-refs';
 
 export default {
@@ -142,6 +142,23 @@ export default {
   },
 
   setup() {
+    const state = reactive({
+      checkbox1: true,
+      checkbox2: true,
+      checkbox3: true,
+      checkboxShape: true,
+      checkboxLabel: true,
+      checboxIcon: true,
+      list: ['a', 'b'],
+      result: ['a', 'b'],
+      result2: [],
+      result3: [],
+      checkAllResult: [],
+      horizontalResult: [],
+      activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
+      inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
+    });
+
     const group = ref();
     const [refs, setRefs] = useRefs();
 
@@ -158,6 +175,7 @@ export default {
     };
 
     return {
+      ...toRefs(state),
       group,
       toggle,
       setRefs,
@@ -165,25 +183,6 @@ export default {
       toggleAll,
     };
   },
-
-  data() {
-    return {
-      checkbox1: true,
-      checkbox2: true,
-      checkbox3: true,
-      checkboxShape: true,
-      checkboxLabel: true,
-      checboxIcon: true,
-      list: ['a', 'b'],
-      result: ['a', 'b'],
-      result2: [],
-      result3: [],
-      checkAllResult: [],
-      horizontalResult: [],
-      activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
-      inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
-    };
-  },
 };
 </script>
 
diff --git a/src/popup/demo/index.vue b/src/popup/demo/index.vue
index 1d903b11c..0c10c6d05 100644
--- a/src/popup/demo/index.vue
+++ b/src/popup/demo/index.vue
@@ -94,6 +94,8 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -124,8 +126,8 @@ export default {
     },
   },
 
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       showBasic: false,
       showTop: false,
       showBottom: false,
@@ -136,7 +138,9 @@ export default {
       showGetContainer: false,
       showCustomCloseIcon: false,
       showCustomIconPosition: false,
-    };
+    });
+
+    return toRefs(state);
   },
 };
 </script>