Vuetify动态v-tabs切换异常：关闭Tab3后无法选中Tab1

点击Tab3右侧的关闭按钮（X标记）后，预期Tab1会被选中，但实际没有任何标签处于选中状态。奇怪的是，通过按钮调用selectedTabFirstTab函数（内部逻辑同样是设置tab.value = 0）时，却能正常选中Tab1。

<template>
  <v-app>
    <v-card>
      <v-tabs v-model="tab" bg-color="primary">
        <v-tab v-for="(t, index) in visibleTabs" :key="t">
          {{ t.name }}
          <v-icon x-small class="ml-2" @click="hideTab(t)">mdi-close</v-icon>
        </v-tab>
      </v-tabs>

      <v-card-text>
        <v-window v-model="tab">
          <v-window-item v-for="(t, index) in visibleTabs" :key="t">
            {{ t.name }}
          </v-window-item>
        </v-window>
      </v-card-text>
    </v-card>

    <v-btn @click="selectedTabFirstTab">选中第一个标签</v-btn>
  </v-app>
</template>

<script setup>
  import { ref, computed } from 'vue'

  const tab = ref(0)
  const allTabs = ref([
    { name: 'Tab1', visible: true },
    { name: 'Tab2', visible: true },
    { name: 'Tab3', visible: true },
  ])
  const visibleTabs = computed(() => allTabs.value.filter(tab => tab.visible))

  function hideTab(t) {
    t.visible = false
    // 关闭最后一个标签时应该重新选中第一个标签
    if (t.name === 'Tab3') {
      tab.value = 0 // 此处设置不生效
    }
  }

  function selectedTabFirstTab() {
    tab.value = 0 // 此处设置正常生效
  }
</script>

点击关闭图标时，事件会向上冒泡到父元素<v-tab>的点击事件。此时<v-tabs>组件会尝试根据点击的tab项更新tab的值，但由于我们已经将Tab3设为不可见，visibleTabs数组长度发生变化，组件内部的索引计算出现异常，最终覆盖了我们手动设置的tab.value = 0，导致无标签选中。而按钮点击不存在事件冒泡问题，所以设置能正常生效。

在关闭图标的点击事件上添加.stop修饰符阻止事件冒泡：

<v-icon x-small class="ml-2" @click.stop="hideTab(t)">mdi-close</v-icon>

修改后，点击关闭按钮不会触发<v-tab>的点击事件，手动设置的tab.value = 0就能正常生效，关闭Tab3后会自动选中Tab1。

内容的提问来源于stack exchange，提问作者robtot