message: docs(TreeSelect): use composition api
diff: @@ -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() {
  + 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,
  - activeIds: [1, 2],
  - activeIndex: 0,
  };
  },
  };
  @@ -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 },
  