Vue Router link Ana Router exact in children - vuejs3

Question

there are two components Dashboard and Apps and they have children. What I want to do is, when clicking any of the Main Components
showMenu is showing but,
I don't want the main components to be opened. and I want the main components and active class to be written
I want it to act as Dashboard and Appsself
app.vue
<template>
<router-link :to="{name:'dashboard'}" #click="isShow('dashboard')">Dashboard</router-link>
<router-link :to="{name:'apps'}" #click="isShow('apps')">Apps</router-link>
<div class="children">
<div class="dashboard" v-show="showName ==='dashboard' && showMenu">
<router-link exact :to="{name:'home'}">Home</router-link>
<router-link exact :to="{name:'about'}">About</router-link>
</div>
<div class="apps" v-show="showName ==='apps' && showMenu">
<router-link exact :to="{name:'setting'}">Setting</router-link>
<router-link exact :to="{name:'profile'}">Profile</router-link>
</div>
</div>
<div class="container">
<router-view/>
</div>
</template>
<script setup>
const showName = ref('')
const showMenu = ref(false)
function isShow(name) {
if (showName.value !== name) {
showMenu.value = true
}
if (showName.value === name) {
showMenu.value = !showMenu.value
} else {
showName.value = name
}
}
</script>
router.js
import {createRouter, createWebHistory, RouterView} from 'vue-router'
const routes = [
{
path: '/dashboards',
name: 'dashboards',
component: RouterView,
children: [
{
path: 'home',
component: () => import('../Views/home.vue'),
name: 'home',
},
{
path: 'about',
component: () => import('../Views/about.vue'),
name: 'about',
},
]
},
{
path: '/apps',
name: 'apps',
component: RouterView,
children: [
{
path: 'setting',
component: () => import('../Views/setting.vue'),
name: 'setting',
},
{
path: 'profile',
component: () => import('../Views/profile.vue'),
name: 'profile',
},
]
},
];
const router = createRouter({
linkActiveClass: "item-active",
linkExactActiveClass: "exact-active",
history: createWebHistory(),
routes
})
export default router;