Vuejs - Move header section of template to parent

I am trying to create a template with two parts

1. the tab (slot) -> could only get the slot to work with using a ref
2. The content (slot)

This component(tab) is wrapped in a component(tabs aka parent) that organizes the tabs based on certain props.

The overall goal is to create something like so: https://getbootstrap.com/docs/4.0/components/navs/#tabs

Except with the ability to have custom tabs. For simplicity, I want to keep all the information relating to the tab within the tab component

1 - the header is not rendered in the component itself but pushed to the parent ***

2 - the tab component pushes the $ref to the parent and then the parent renders the HTML and listeners

How can i push(or another method to pass the information to the parent) data to the parent and keep all the listeners and js associated with the components in the tab slot

 //tab component
           <template>
           <div>
                <div class="tab" ref="tab">
                     <slot name="heading"> //-> Only available in setup context.slots if the default content is not used therefore resulted in using ref
                     //Default content
                            //-> if I add content to the heading slot via different components, the JS/listeners associated to those components do not work. I assume because I'm only pushing the HTML
                     </slot>
                </div>
                <div class="content ">
                     <slot/>
                </div>

           <div>
      </template>

      <script>
      import {onMounted, ref} from '@nuxtjs/composition-api'

      setup(props, {parent}){
           const tab = ref()

           onMounted(()=>{
                let tab = {
                     data: tab.value //The entire ref
                     //data: tab.value.innerHTML => Works for passing the html but no listeners or js work
                }

                //parent has data.tabs = []   
                parent.data.tabs.push(tab)

           })


           return {
                tab
           }

      },
      props:{
           ....
      }
      </script>

   //tab parent component (part to render tab via data.tabs)
   <ul

  >
    <li
      v-for="(child, index) in data.tabs"

      class="s-tabs--li"

      v-bind:key="index"
      v-html="child.data"
    ></li>
  </ul>



//Used in action
<s-tabs>
  <s-tab heading="Home">
    <div>
      Home
    </div>
  </s-tab>
  <s-tab heading="Service" icon="flower" tag="music">
    <div>
      Service
    </div>
  </s-tab>
</s-tabs>

from Vuejs - Move header section of template to parent