[Bug Report] Tabs slider not showing

[ThomasKientz]

Environment

Vuetify Version: 2.2.32
Vue Version: 2.6.11
Browsers: Chrome 83.0.4103.61
OS: Mac OS 10.15.3

Steps to reproduce

1. Hide a VTabs with v-show
2. Show the Vtabs

Expected Behavior

The tab slider to be visible.

Actual Behavior

Tab slider is not visible until we click on a tab.

Reproduction Link

https://codepen.io/thomaskientz/pen/JjGoGOq

[gmeral]

Looks like this issue is already known by the maintainers but no fix is planned as far as i know :
#11206
#4733

Had the same problem and used the IntersectionObserver to observe the tabs visibility and forcing the slider to appear as a workaround :
Put a ref on VTabs

<v-tabs v-model="selectedTab" ref="tabs">

Call this in mounted

observeVisibility() {
      var element = this.$refs.tabs.$el
      if (window.IntersectionObserver) {
        this.intersectionObserver = new IntersectionObserver((entries) => {
          if (entries[0].intersectionRatio) {
            // There is an intersection, the content is visible
            // Manually calling VTabs onResize method to properly show the slider
            this.$refs.tabs.onResize()
          }
        }, {
          root: document.body
        })
        this.intersectionObserver.observe(element)
      }
    },

Don't forget to stop the observer in beforeDestroy :

unObserveVisibility() {
      if (this.intersectionObserver) {
        this.intersectionObserver.disconnect()
      }
    }

[jacekkarczmarczyk]

Duplicate of #4733

EDIT; run this.$refs.tabs.callSlider() after showing tabs