Как сделать условную отрисовку компонента?

Question

[Алексей]

Всем привет, подскажите как реализовать следующий функционал Есть компонент который реализует возможность создания табов, и нужно чтобы при нажатии на этот там выводилось не только названия таба, но и нужный компонент, не совсем понимаю как это сделать.
создано 2 компонента и Каждый из них должен выводиться при нажатии на соответствующую кнопку newTab('Wagon') - WagonTable newTab('Flight') - FlightTable

<template>
  <div>
    <div id="navbarMain">
          <ul class="navbarul">
              <li class="navbarList"> 
                <div @click="newTab('Dislocation')">  
                  <img src="@/assets/map.png" class="image">
                </div>
                <b-dropdown id="dropdown-1" text="Дислокация" class="m-md-2">
                    <b-dropdown-item @click="newTab('Dislocation')">дислокация 1</b-dropdown-item>
                </b-dropdown>
              </li>

              <li class="navbarList" >   
                <div @click="newTab('Flight')">  
                  <img src="@/assets/flight.png" class="image">
                  <!-- <p class="navbarDescription">Рейсы▾</p> -->
                </div>
                <b-dropdown id="dropdown-1" text="Рейсы" class="m-md-2">
                    <b-dropdown-item @click="newTab('Flight')">Рейсы 1</b-dropdown-item>
                </b-dropdown>
              </li>

              <li class="navbarList">  
                <div @click="newTab('Wagon')">
                  <img src="@/assets/wagon.png" class="image">
                </div> 
                <b-dropdown id="dropdown-1" text="Вагоны" class="m-md-2">
                    <b-dropdown-item @click="newTab('Wagon')">Вагоны 1</b-dropdown-item>
                </b-dropdown>
              </li>

              <li class="navbarList" >  
                <div @click="newTab('Report')">   
                  <img src="@/assets/report.png" class="image">
                </div>
                <b-dropdown id="dropdown-1" text="Отчеты" class="m-md-2">
                  <b-dropdown-item @click="newTab('Report')">Отчеты 1</b-dropdown-item>
                </b-dropdown>
              </li>
        </ul>
    </div>


                <div>
                  <b-card no-body class="leftTable">
                    <b-tabs card>
                      <b-tab v-for="i in tabs" :key="i.id">
                          <template #title>
                              <span>Таблица {{i.name}}</span>
                              <span @click="closeTab(i.id)">&nbsp;&nbsp;❌</span>
                          </template>
                          <b-card-text>
                              {{i.name}}
                        
                          </b-card-text>
                      </b-tab>
                    </b-tabs>
                  </b-card>
                </div>
                
                <WagonTable></WagonTable>
                <FlightTable></FlightTable>

  </div>

</template>

<script>
import WagonTable from './Table/WagonTable.vue'
import FlightTable from './Table/FlightTable.vue'
export default{
    name: 'WagonPark',
    components:{WagonTable, FlightTable},
    data() {  
      return {
        tabs: [],
        tabCounter: 0,
      }
    },
    methods:{
      closeTab(x) {
        for (let i = 0; i < this.tabs.length; i++) {
          if (this.tabs[i].id === x) {
            this.tabs.splice(i, 1)
          }
        }
      },
      newTab(tabname) {
            this.tabs.push({'id': this.tabCounter++,
                            'name': tabname})
                      
          }
     
    }
  }
</script>