docs(TreeSelect): use composition api

src/tree-select/README.md

@@ -16,19 +16,41 @@ app.use(TreeSelect);
 
 ```html
 <van-tree-select
-  v-model:active-id="activeId"
-  v-model:main-active-index="activeIndex"
+  v-model:active-id="state.activeId"
+  v-model:main-active-index="state.activeIndex"
   :items="items"
 />
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
-      items,
+  setup() {
+    const state = reactive({
       activeId: 1,
       activeIndex: 0,
+    });
+    const items = [
+      {
+        text: 'Group 1',
+        children: [
+          { text: 'Delaware', id: 1 },
+          { text: 'Florida', id: 2 },
+        ],
+      },
+      {
+        text: 'Group 2',
+        children: [
+          { text: 'Alabama', id: 5 },
+          { text: 'Kansas', id: 6 },
+        ],
+      },
+    ];
+
+    return {
+      state,
+      items,
     };
   },
 };
@@ -38,19 +60,41 @@ export default {
 
 ```html
 <van-tree-select
-  v-model:active-id="activeIds"
-  v-model:main-active-index="activeIndex"
+  v-model:active-id="state.activeIds"
+  v-model:main-active-index="state.activeIndex"
   :items="items"
 />
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
-      items,
-      activeIds: [1, 2],
+  setup() {
+    const state = reactive({
+      activeId: [1, 2],
       activeIndex: 0,
+    });
+    const items = [
+      {
+        text: 'Group 1',
+        children: [
+          { text: 'Delaware', id: 1 },
+          { text: 'Florida', id: 2 },
+        ],
+      },
+      {
+        text: 'Group 2',
+        children: [
+          { text: 'Alabama', id: 5 },
+          { text: 'Kansas', id: 6 },
+        ],
+      },
+    ];
+
+    return {
+      state,
+      items,
     };
   },
 };
@@ -60,17 +104,17 @@ export default {
 
 ```html
 <van-tree-select
-  v-model:main-active-index="active"
+  v-model:main-active-index="activeIndex"
   height="55vw"
   :items="items"
 >
   <template #content>
     <van-image
-      v-if="active === 0"
+      v-if="activeIndex === 0"
       src="https://img.yzcdn.cn/vant/apple-1.jpg"
     />
     <van-image
-      v-if="active === 1"
+      v-if="activeIndex === 1"
       src="https://img.yzcdn.cn/vant/apple-2.jpg"
     />
   </template>
@@ -78,10 +122,13 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const activeIndex = ref(0);
     return {
-      active: 0,
+      activeIndex,
       items: [{ text: 'Group 1' }, { text: 'Group 2' }],
     };
   },
@@ -99,10 +146,13 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   data() {
+    const activeIndex = ref(0);
     return {
-      activeIndex: 0,
+      activeIndex,
       items: [
         { text: 'Group 1', children: [], dot: true },
         { text: 'Group 2', children: [], badge: 5 },