Nested list implementation in VueJS - NuxtJS?

Question

Vue.js

Dear experts, the following question appeared (I use Vue and Nuxt), there is a nested list of this kind:

That is, when you click on one of the menu buttons, the corresponding blocks are substituted, I can imagine how to implement this, but I think that this is a crutch, that is, we get all the items menu, check if they have an active class, remove them from everyone, re-assign the target, and also get a button on the target and call the necessary blocks, hiding the rest.
But perhaps there is a better way to solve it (without a bunch of manual deletions and additions of classes, for example, as class-active when using routes) or some kind of tag that I just don’t know about?
Thanks in advance

Answer 1

<template>
<div>
<Menu>
  <MenuItem v-for="item in items" @click="activeItem = item.name" :key="item.name"/>
</Menu>
<List>
  <ListItem v-for="item in items" v-if="activeItem === item.name" :key="item.name">
    <keep-alive> <!-- опционально -->
     <component :is="item.component" />
    </keep-alive>
  </ListItem>
</List>
</div>
</template>

export default {
components: {
  ComponentName: () => import('@/components/ComponentName'), //dynamic import + built in prefetch
  // other components
}
data: () => ({
    activeItem: 'livingBuildings',
    items: [
     {
       name: 'livingBuildings',
       component: '', // имя компонента
     },
    ]
  }),
}

</script>