Tabs: Animating to tab without route being changed

[james-onpoint]

Describe the bug

I'm using Tabs > TabList > Tab components to do some navigation within a component using the router to handle the content, the tabs are just a navigation means.

The problem is that they are often buggy, if I switch between the two quickly or sometimes just seemingly for no reason, the tabs will animate to the clicked tab as expected but the route change from my NuxtLink has not not happened.

Code (ignore the @click.stop.prevent, this was me "trying" to fix it:

<script setup lang="ts">
import Tabs from "primevue/tabs";
const props = defineProps(['items', 'value']);

const route = useRoute();

const selectedTab = computed(() => {
  if (props.items)
  {
    for (let i = 0; i < props.items.length; i++)
    {
      if (route.path.toLowerCase().includes(props.items[i].route.toLowerCase()))
      {
        return props.items[i].route;
      }
    }
  }
  return null;
});
</script>

<template>
<!--  TODO: FIX BUGGY FAST SWITCHING-->
  selectedTab: {{selectedTab}}
  <Tabs :value="selectedTab">
    <TabList>
      <Tab @click.stop.prevent="()=>{}" v-for="tab in items" :value="tab.route">
        <NuxtLink v-if="tab.route" :to="tab.route">
          <div class="cursor-pointer flex items-center gap-2 text-inherit">
            <i :class="tab.icon"></i>
            <span>{{tab.label}}</span>
          </div>
        </NuxtLink>
      </Tab>
    </TabList>
  </Tabs>
</template>

Please see below screenshots of what is happening, the correct behaviour should look like this:

When the bug happens, this is what it could look like (tab is Settings, route and selectedTab are details):

I expect that this isn't a bug in PrimeVue and it is more my lack of deep-understanding of reactivity in Vue etc.

Any tips? Thanks a lot

Reproducer

none

PrimeVue version

4.1.0

Vue version

3.x

Language

ALL

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response