Tab content not showing after updating sw-tabs with mt-tabs

<mt-tabs
    @new-item-active="setActiveItem"
    :items="[
        {
            label: '1',
            name: 'tab1'
        },
        {
            label: '2',
            name: 'tab2'
        }
    ]"
>
    <template #content>
        <p>Tab Content Loaded!</p>
    </template>
</mt-tabs>

1 and 2 are showing up but the content is not visible. Any ideas what I am doing wrong? I changed template #content to template #default with no success.

The content slot <template #content> is not supported anymore. You need to set the content manually outside the component <mt-tabs>.

You can use the @new-item-active event to get the active item and set it to a variable. Then, use variables in your template:

<template>
  <div>
    <mt-tabs
      :items="[
        { label: '1', name: 'tab1' },
        { label: '2', name: 'tab2' }
      ]"
      @new-item-active="setActiveItem"
    />
    
    <sw-tab1 v-if="currentActiveTab === 'tab1'" />
    <sw-tab2 v-if="currentActiveTab === 'tab2'" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentActiveTab: 'tab1',
    };
  },
  methods: {
    setActiveItem(item: string): void {
      this.currentActiveTab = item;
    },
  },
};
</script>