[Bug Report][2.3.16] v-tabs-slider

[telion2]

Environment

Vuetify Version: 2.3.16
Vue Version: 2.6.11
Browsers: Firefox 94.0
OS: Ubuntu undefined

Steps to reproduce

Hi, I think I go a bug with the v-tabs-slider. When mounting it, it doesn't calculate the correct width to display as you can see in the picture provided. When resizing the window, it corrects itself.
The Code I use:

... 
<v-tabs
        color="#e20074"
        center-active
        show-arrows="false"
        v-model="tab"
      >
        <v-tab
          class="tabTitle"
          v-for="(tabItem, index) in redirections"
          :key="index"
        >
          {{ tabItem.name }}
        </v-tab>
      </v-tabs>
...
mounted() {
    this.tab = this.redirections.length > 1 ? 1 : 0;
},
computed:{
    redirections() {
      return [
        {
          key: "myAccount",
          name: this.$t("myAccount"),
          color: "",
        },
        ...
      ]
    }
}

Expected Behavior

The slider immediately calculates the correct size. On Update (or whenever the watcher is triggered) is too late.

Actual Behavior

The slider calculates the size, when one of its watchers is triggered. If they are not triggered for whatever reason, the slider gets the wrong width. It also might be the case that the calculation is wrong, but since it works when resizing the window e.g., I guess it's the reactivity.

Reproduction Link

https://codepen.io/erichaemmerle/pen/rNzgPrj

Other comments

I blame:

vuetify/packages/vuetify/src/components/VTabs/VTabs.ts

Line 128 in 8bb752b

watch: {

Because the way I interpret it, is that the watcher call "callSlider" (

vuetify/packages/vuetify/src/components/VTabs/VTabs.ts

Line 150 in 8bb752b

callSlider () {

)
but the watcher is only called on update and not immediately.

The solution I propose is to create the watchers like this:

watch:{
    alignWithTitle: {
      handler() {
          this.callSlider()
      },
      immediate: true,     //calls the watcher at the latest on mounted
    },
}

[telion2]

[telion2]

I personally solved it by forcing the watchers to trigger like this:

mounted() {
    this.$vuetify.application.left = 1;
    setTimeout(() => {
      this.$vuetify.application.left = 0;
    }, 200);
  },

Basically v-tabs-slider watches $vuetify.application.left and calls "onResize". I overwrite that value and change it back again after some time.
This however is quite a dirty workaround, and one where I am not sure how stable it is.

[KaelWD]

It is already called on mounted:

vuetify/packages/vuetify/src/components/VTabs/VTabs.ts

Lines 143 to 147 in 8bb752b

	mounted () {
	this.$nextTick(() => {
	window.setTimeout(this.callSlider, 30)
	})
	},

Duplicate of #4733