Как вывести функцию из одного компонента в другом?

Question

[Алексей]

Есть родительский и дочерний компонент Дочерний это навбар в котором есть кнопки, на которых лежит функция создания таба, если убираю компонент и вставляю html код на прямую, то все работает, если делаю компонентом, то нет, подскажите как сделать

// Дочерний

<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>


<!-- <div> 
    <button class="button Request">Запрос</button>
    <button class="button Accept">Подтверждение</button>
    <button class="button Delete">Удаление</button>
    <button class="button Action">Действие</button>
    <button class="button Cancel">Отмена</button>
    </div> -->

</template> 

<script>
// import Wagon from '../mixins/Wagon';
    export default{
        name: 'Navbar',
        methods:{
          newTab(tabname) {
            this.tabs.push({'id': this.tabCounter++,
                            'name': tabname})
          }
        }

    }
</script>
    
    
 // Родительский 
 
  
    <div>
      <WagonNavbar/>


              <div>
                <b-card no-body class="leftTable">
                  <b-tabs card>
                    <b-tab v-for="i in tabs" :key="'dyn-tab-' + 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>

    </div>



import WagonNavbar from './Navbar/WagonNavbar.vue';




export default{
    name: 'WagonPark',
    components:{WagonNavbar},
    // mixins: [Wagon],
    data() {  
      return {
        tabs: [],
        tabCounter: 0,
        selected: ''
      }
    },

    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})
          }

       
    }
    }