designtopack/src/components/Projects.vue

<template>
  <h2 id="tabslist" class="sr-only">Projets</h2>
  <template v-if="projects.children">
    <Tabs :projects="projects.children" @update:currentTab="changeTab" />
    <TabPanel :projects="projects.children" :currentTab="currentTab" />
  </template>
</template>
<script setup>
import Tabs from "./Tabs.vue";
import TabPanel from "./TabPanel.vue";
import { useProjectsStore } from "../stores/projects";
import { ref } from "vue";
import { storeToRefs } from "pinia";

const { projects } = storeToRefs(useProjectsStore());

const currentTab = ref("current");

function changeTab(newValue) {
  currentTab.value = newValue;
}
</script>

<style scoped></style>