gistfile1.txt

<div class="card shadow-sm card-tab">
              <div class="card-body">
                <span> {{ activeTab.name }} {{ activeTab.index }}  /  {{tabs.length}}  <button @click="previousTab($event)" type="button" class="btn btn-light">&lt;</button> <button @click="nextTab($event)" type="button" class="btn btn-light">	&gt;</button></span>
              </div>
            </div>
               <div class="b-example-divider"></div>
            <div class="card shadow-sm card-tab">
              <div class="card-body">
                <ul class="nav nav-pills  nav-fill nav-flush flex-row mb-auto text-center" id="myTab" role="tablist">
                  <li class="nav-item  border-end" role="presentation"   v-for="(tab, index) in tabs" :key="tab.id">
                    <a href="#"  @click="changeActiveTab(tab, $event)" class="nav-link" id="house-tab" :aria-controls="tab.id"  data-bs-toggle="tab" :data-bs-target="'#' + tab.id" 
                    type="button" role="tab" aria-selected="true" :class="{ active: isSelected(tab) }"> {{tab.name}}  </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="b-example-divider"></div>
            <div class="card shadow-sm">
              <div class="card-body">
                <div class="tab-content" id="myTabContent">
                  <div class="tab-pane fade "  :class="{ active: isSelected(tab),show: isSelected(tab)  }" role="tabpanel" aria-labelledby="house-tab" v-bind:id="tab.id"  v-for="(tab, index) in tabs" :key="tab.id">
                     <component :is="tab.component" v-if="tab.canLoad"/>
                  </div>
                
                </div>
              </div>
            </div> 

x.ts

return {
      store: store,
      activeTab:null,
      tabs:[
        {
          component:'HouseSelector',
          id: 'house',
          name: 'Ev',
          canLoad:true,
          index:1
        },
        {
          component:'RoofSelector',
          id: 'roof',
          name:'Roof',
          canLoad: computed(() => store.isModelLoaded),
          index:2
        },
        {
          component:'SidingSelector',
          id: 'siding',
          name:'Siding',
          canLoad: computed(() => store.isModelLoaded),
          index:3
        },
        {
          component:'HardwoodSelector',
          id: 'hardwood',
          name: 'Hardwood',
          canLoad: computed(() => store.isModelLoaded),
          index:4
        },
        {
          component:'WindowSelector',
          id: 'window',
          name:'Window',
           canLoad: computed(() => store.isModelLoaded),
           index:5
        },
        {
          component:'DoorSelector',
          id: 'door',
           name:'Door',
            canLoad: computed(() => store.isModelLoaded),
               index:6
        },
        {
          component:'FeatureSelector',
          id: 'feature',
           name:'Feature',
           canLoad: computed(() => store.isModelLoaded),
              index:7
        },
        {
          component:'FlagSelector',
          id: 'flag',
           name:'Flag',
           canLoad: computed(() => store.isModelLoaded),
              index:8
        }
      ]
    }

 created(){
    this.activeTab = this.tabs.find(x=>x.canLoad)
  },

changeActiveTab(tab, event) {
      this.activeTab = tab
    },
    isSelected(tab){
      return this.activeTab.id === tab.id;
    },
    previousTab(event){
      const activeTabIndex = this.activeTab.index
      if(activeTabIndex<=1){
        return
      }
      this.activeTab = this.tabs.find(x=>x.index === activeTabIndex -1)
    },
    nextTab(event){
      const activeTabIndex = this.activeTab.index
      if(activeTabIndex>=8){
        return
      }
      this.activeTab = this.tabs.find(x=>x.index === activeTabIndex +1)
    }