van-tabs 在动态van-tab时，active存在不变化情况

[gradyll]

重现链接

https://codesandbox.io/p/devbox/vant-4-issue-template-forked-jclsxq?file=%2Fsrc%2FApp.vue%3A26%2C15&workspaceId=6eb72418-35c0-4894-917d-f207331340c3

Vant 版本

4.9.1

描述一下你遇到的问题。

如demo ，active默认为 “1”，点击“切换 2”，active.value = 5, 选中“增项”，再点击“切换 1”，这是显示的 却是 active.value 为“5”，选中的为“增项”，active.value 并没有变化

重现步骤

如demo ，active默认为 “1”，点击“切换 2”，active.value = 5, 选中“增项”，再点击“切换 1”，这是应该默认 代码 active.value = 1; 显示 “未完成”，但实际情况为：active.value = 5,并没有变化为“1”

设备/浏览器

No response

### Tasks

[inottn]

重现链接无法访问

[gradyll]

具体代码如下：

<template>
  <div id="app">
    <van-button type="primary" @click="change(1)">切换1</van-button>
    <van-button type="default" @click="change(2)">切换2</van-button>
    状态: {{ active }}
    <van-tabs v-model:active="active" shrink>
      <van-tab
        v-for="(item, idx) in homeTabs"
        :key="idx"
        :title="item.title"
        :name="item.status"
        >{{ item.title }}
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";

const active = ref(1);

const tab_1 = [
  {
    title: "未完成",
    status: 1,
  },
  {
    title: "增项",
    status: 5,
  },

  {
    title: "已完成(7日内)",
    status: 4,
  },
];

const tab_2 = [
  {
    title: "增项",
    status: 5,
  },
  {
    title: "待终检",
    status: 2,
  },

  {
    title: "待客户签字",
    status: 3,
  },
  {
    title: "已完成(7日内)",
    status: 4,
  },
];
const homeTabs = ref(tab_1);

const change = (type) => {
  if (type == 2) {
    homeTabs.value = tab_2;
    active.value = 5;
  }

  if (type == 1) {
    homeTabs.value = tab_1;
    active.value = 1;
  }
};
</script>

<style>
.my-button {
  margin: 15px;
}
</style>

[inottn]

看了下，tabs 改变了会在下一帧生效，所以当 active 改变，内部逻辑读取到的还是上一个 tabs 的数据。你可以在 nextTick 中改变 active。 点击 切换 2 没有问题，是恰好 status: 5 在两个 tab 中都存在。你可以把 5 换成其它值，也会有这个问题。