van-tabs的底部条位置错误，resize方法没有作用

最近在使用vant里面的组件，van-tabs是，底部条位置总是错误，页面长这样

可是我想要的结果是这样

官网所说的解决办法如图，不过我由于某些限制不能使用第一种方法，第二种方法resize使用了没有作用

后面我发现了三种解决办法（如果说明不清楚，可看代码），办法如下

方法1：在nextTick里面给要展示tab数组赋值

方法2：在nextTick里面改变active的值，这里需要注意，赋的值和原始值必须不一样

方法3：把要赋值的函数换为 async 函数，结果换为 await 获取

代码如下：

<template>
  <van-tabs
    v-model:active="active"
    class="channels-tabs"
    swipe-threshold="1"
    ref="tabs"
  >
    <van-tab
      v-for="tab in tabArr"
      :key="tab"
      :title="tab"
    >{{tab}}</van-tab>
  </van-tabs>
</template>

<script>
import { nextTick, onMounted, reactive, ref, toRefs, getCurrentInstance } from 'vue';
function useTabs (active) {
  const tabObj = reactive({
    tabArr: []
  })
  const onAxios = () => { // 模拟请求数据
    const res = ['关注', '推荐', '体育', '热点', '财经']
    // tabObj.tabArr = res  // 这里直接这样会导致底部条位置不准
    // 方法1，使用 方法1 时需要把上面的 tabObj.tabArr = res  注释
    nextTick(() => {
      tabObj.tabArr = res
    })
    // 方法2
    // nextTick(() => {
    //   active.value = 1   // 这里的赋值要和初始值不一样，不然不生效
    // })
  }

  //   方法3，把请求换为 async 函数，结果加上 await
  //   const onAxios = async () => { // 模拟请求数据
  //     const res = ['关注', '推荐', '体育', '热点', '财经']
  //     tabObj.tabArr = await res
  // }

  onMounted(() => {
    onAxios()
    // 下年是官网看的 resize() 方法，但是我试了，没有作用
    // const currentInstance = getCurrentInstance()  // 获取当前实例
    // currentInstance.refs.tabs.resize()     // 类似于 vue2 的 this.$refs.tabs.resize()
  })
  return {
    tabObj
  }
}
export default {
  setup () {
    const active = ref(0);
    const { tabObj } = useTabs(active)
    return {
      active,
      ...toRefs(tabObj),
    };
  },
};
</script>

<style>
.channels-tabs .van-tab {
  min-width: 120px;
  border-right: 1px solid #edeff3;
  font-size: 16px;
  color: #777;
}
.channels-tabs .van-tab--active {
  color: red;
}
.channels-tabs .van-tabs__line {
  background-color: #3296fa;
  width: 20px;
  height: 6px;
}
.channels-tabs .hamburger-btn {
  /* 固定定位 */
  position: fixed;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 66px;
  height: 32px;
  background-color: #fff;
  /* 设置透明度 */
  opacity: 0.902;
  /* 设置图标的大小 */
  font-size: 23px;
}
.channels-tabs .van-tabs__wrap {
  width: 100%;
  position: fixed;
  left: 0;
  top: 46px;
  z-index: 1;
}
</style>