Отрисовка компонента при нажатии на кнопку

Всем привет, необходимо при нажатии на ссылку отрендерить ранее созданный компонент, не совсем понимаю как это можно сделать

export default{
    name: 'Flight',
    data() {
      return {
        tabs: [],
        tabCounter: 0,
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    },
    methods: {
      closeTab(x) {
        for (let i = 0; i < this.tabs.length; i++) {
          if (this.tabs[i] === x) {
            this.tabs.splice(i, 1)
          }
        }
      }
      },
      newTab() {
        this.tabs.push(this.tabCounter++)
      }
}
   <div id="navbarMain">


   <ul class="navbarul">
    <li class="navbarList">   
        <img src="@/assets/map.png" class="image">
        <p class="navbarDescription"><a href="https://vuejsexamples.com/tag/tab/">Дислокации▾</a></p>
    </li>

    <li class="navbarList" >   
        <img src="@/assets/flight.png" class="image">
        <p class="navbarDescription">Рейсы▾</p>
    </li>
    <li class="navbarList">   
        <img src="@/assets/wagon.png" class="image">
        <p class="navbarDescription">Вагоны</p>
    </li>
    <li class="navbarList">   
        <img src="@/assets/report.png" class="image">
        <p class="navbarDescription">Отчеты▾</p>
    </li>
   </ul>






   </div>


// компонент

<template>
    <div class="contentWagonPark">
    

    <b-card  class="leftPark" >
    <b-tabs card>
        <b-tab title="Карточка вагонов">
            <b-table striped hover :items="items"></b-table>
        </b-tab>

        <b-tab v-for="i in tabs" :key="'dyn-tab-' + i" :title="'Карточка вагонов № ' + i">
        Карточка вагонов № {{ i }}
        <b-button size="sm" variant="danger" class="float-right" @click="closeTab(i)">
        Закрыть
        </b-button>
        </b-tab>

        <template #tabs-end>
        <b-nav-item  @click.prevent="newTab" href="#"><b>+</b></b-nav-item>
        </template>

      

    </b-tabs>
    </b-card>

</div>  
</template>


Ответы (0 шт):