Tabs.vue - script

Tabs.vue

<script>
import { watch, ref, provide, defineComponent } from "vue";

export default defineComponent({
  name: "Tabs",
  props: {
    groupName: { type: String, required: true },
    initialTab: { type: String, required: true },
  },
  emits: ["change"],
  setup(props, { emit }) {
    const selectedTab = ref(props.initialTab);

    watch(
      () => selectedTab.value,
      () => emit("change", selectedTab.value)
    );

    provide("groupName", props.groupName);
    provide("selectedTab", selectedTab);
  },
});
</script>