The contents of the tab remain hidden after hiding all tabs and showing it back.

[dany-eudes]

We have a requirement:

After the last tab, there is another hidden. When the user clicks on the Finish button, all guides, including the current tab, will be hidden as well. At that point that hidden initial tab will appear and show its contents. If necessary, the user can use the Finish button, now a Restart button, to restart the wizard and return to the initial tab configuration.

We are using components for each tab so that the tabs return in the original sequence.

At a given moment all tabs are hidden and when one is made visible again the content is not shown until you click on Next/Back button.

We post a use case in JSFiddle. By hiding tabs and making them visible again, as long as they are not all, all is Ok. But if you make them all hidden, when you make any of them visible again, their content is not shown.

https://jsfiddle.net/dany_eudes/o2a43xh8/2/

For us it seems that the Index of the tabs becomes -1 and this causes this anomaly. But it's just a guess.

PS: Hiding the first tab already causes this anomaly although the others remain visible.

[dany-eudes]

It's possible to workaround this anomaly just right watching the active index value. When it drops to -1 we could make an extra call to .nextTab() forcing it to be incremented to 0. Be sure there's a one tab visible at least.

    <form-wizard ref="myFormWizard"  @on-complete="onComplete" :start-index.sync="activeIndex">

...
    watch: {
      activeIndex: function(val) {
        console.log('activeIndex WATCHED: ' + val);
        if( this.activeIndex == -1) {
          console.log('Workaround:  nextTab()');
          this.$refs.myFormWizard.nextTab();
        }
      }
    },  
  data: function () {
    return {
      activeIndex: 0,
...