[Bug Report][3.4.7] Active tab indicator only animates when switching to a previous tab

[Gawdl3y]

Environment

Vuetify Version: 3.4.7
Vue Version: 3.3.12
Browsers: Chrome 120.0.0.0
OS: Windows 10

Steps to reproduce

1. Have a VTabs component with multiple VTab children
2. Click on a tab that comes after the current active tab and observe that there is no animation of the indicator line below it
3. Click on a tab that comes before the current active tab and observe that the indicator line animates properly

Expected Behavior

Active tab indicator line animates for moving between tabs in either direction

Actual Behavior

Active tab indicator line only animates for moving to a tab before the current active tab

Reproduction Link

https://play.vuetifyjs.com/#...

[MarcHartwig13]

This is happening to me even when passing in the v-model correctly. I've narrowed it down to line 46 in vuetify/lib/components/VTabs/Vtab.mjs , in the updateSlider function, which is:

const prevEl = rootEl.value?.$el.parentElement?.querySelector('.v-tab--selected .v-tab__slider');

The issue when clicking an element after the active tab is that prevEl comes back as undefined which fails the check if (!prevEl || !nextEl) return; on line 48 This explains why it is not animating because the animate function is fired after the if check on line 48

Looking into it more closely it looks like the querySelector in prevEl is what is failing when clicking a tab after the active tab. What I think is happening is the querySelector is firing before the class v-tab--selected is moved to the new element.

Workaround

Ok, working with a coworker and we've narrowed it down to being an issue with with the vue version. If using vue version 3.3.8 or earlier it works fine. If using 3.3.9 or later the issue exists. I'm assuming a change in 3.3.9 may have negatively effected the Vtab component and the updateSlider function

Reproduction of workaround using Vue 3.3.8: https://play.vuetifyjs.com/#eNqFkNEKgjAUhl/lcG4sSMUMCtGgm16g7rIL00mCurHN3Yjv3pkziCC62n6+b4f/7DaikmV4EiIwA8MEU8060RaaHfMeIDV+IcR8nYMuHgqM3/GKtVmOFHNc6JtDYop2YEQjYudGKp2GM/kpbkm8sJL31T8zJvP6bOSXuCTlOlNwpdPwYxmKqpSN0KCYHtxOTSe41DCCZDVMUEvegUf/4FkdgBopDbZAZo1VtLYz3RR6j9MG4yAODmjPXbDH+wsNYWje

[MarcHartwig13]

This may be resolved when this issue is fixed in vuejs: vuejs/core#8639

[KaelWD]

It was 3.3.11 actually, the first button now re-renders before the second one gets the update event.

3.3.10:

3.3.11: