[Bug Report] v-tabs slider mispositioned on initial render with v-img in v-app-bar

[jaapspiering]

Environment

Vuetify Version: 2.4.5
Vue Version: 2.6.12
Browsers: Chrome 88.0.4324.192, Mozilla Firefox, Google Chrome
OS: Mac OS 11.2.2, Windows

Steps to reproduce

Create a v-app-bar with v-tabs (with fixed-tabs or grow option). After the v-tabs we have a v-img with the company logo.

Load the app - On initial render the slider for the currently selected tab is position too far to the right. When the page is redrawn (press F5, Ctrl-R, or open F12 Developer Tools for example) it moves to the correct position. This does not reproduce if there is no v-img present.

Expected Behavior

Slider aligned with the tab

Actual Behavior

Slider is placed too far to the right

Reproduction Link

https://codepen.io/jaapspiering/pen/ExNdXEQ

[jaapspiering]

I just noticed the tabs move a bit to the left after the slider is first rendered, right when the image shows.
Adding the eager property to the v-img seems to do the trick and renders the slider correctly in one go.

[paddotk]

I omitted this issue by appying a key (:key) to the tab group and changing that key once after initial render. So something like

<v-tabs centered :key="tabsKey">

  data: () => ({
    tabsKey: 1
  }),
 mounted() {
  setTimeout(() => {
    this.tabsKey = 2;
  }, 100);
}

Not a very neat way but does the job.

[KaelWD]

Duplicate of #4733