docs(Checkbox): use composition api

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>