How to correctly iterate over childs in slot and interact with them?

I want to create a component in Vue like the Ribbon component in Microsoft Office applications. (This: https://en.wikipedia.org/wiki/Ribbon_%28computing%29)

The usage of the component in templates should be like putting components in components.
Like you place a <RibbonComponent> ... </RibbonComponent>, and inside that component’s “tag” you write <RibbonTab>‘s.

This is what I mean about the usage of the component:

<RibbonComponent>
    <RibbonTab title="Edit" />
    <RibbonTab title="Selection" />
    <RibbonTab title="Help" />
</RibbonComponent>

See my code in the Vue SFC playground (not working)

I’m just doing it with a <slot> defined in the RibbonComponent, and the RibbonTab‘s are actually just multiple children on the top level in the hierarchy inside that slot.

For the tab buttons on top, I just iterate over the childs in the slot and render buttons in a template loop inside the RibbonComponent template.

When one of those buttons is clicked, I have to switch the visibility of the corresponding RibbonTab. The way I’m trying to do this doesn’t work and seems to be cumbersome at all. All manipulations to the childs of the slot don’t have any effect. See data field tabs in the RibbonComponent. When I console.log that tabs, I see an array of objects which are probably something like copies of vnodes.

When I peek at existing component libraries, I see a template markup exactly as I want. See this example of an existing component library. As you can see, the template code is like:

<template>
  <ejs-ribbon id="ribbon">
    <e-ribbon-tabs>
      <e-ribbon-tab header="Home">
        <e-ribbon-groups>
          <e-ribbon-group header="Clipboard" orientation="Row"></e-ribbon-group>
        </e-ribbon-groups>
      </e-ribbon-tab>
    </e-ribbon-tabs>
  </ejs-ribbon>
</template>

<script>
import { RibbonComponent, RibbonTabDirective, RibbonTabsDirective, RibbonGroupDirective, RibbonGroupsDirective } from "@syncfusion/ej2-vue-ribbon";
export default {
  components: {
    'ejs-ribbon': RibbonComponent,
    'e-ribbon-tab': RibbonTabDirective,
    'e-ribbon-tabs': RibbonTabsDirective,
    'e-ribbon-groups': RibbonGroupsDirective,
    'e-ribbon-group': RibbonGroupDirective
  }
};
</script>

But when reading that code, I actually don’t understand how it works. The <e-ribbon-tabs> gets my attention, because that imported component’s name has something to do with a directive but when I think of what directives are in Vue, I don’t understand if it even relates to that.