VueJS: Router Children in Children - vue.js

Question

i want to do two different operations,
domain.com/myaccount
When I log in, the menu I specified below appears and I can do whatever I want from this menu, but,
//User information
When I click edit in the dropdown menu content
well
path
domain.com/myaccount/edit
when i login
//Basket Transactions
name: 'cart.show',
domain.com/myaccount/
It looks like it's opened.
How do I tell they are different?
How should I go about the router-link?
const routes = [
{
path: '/myaccount',
name: 'myaccount',
component: MyaccountView,
children: [
//User information
{
path: '',
name: 'profile.show',
component: RouterView,
children: [
{
path: 'edit',
name: 'edit.show',
component: EditView
}
]
},
//Basket Transactions
{
path: '',
name: 'cart.show',
component: RouterView,
children: [
{
path: 'buy',
name: 'buy.show',
component: BuyView
}
]
}
]
},
{path: '*', component: NotFound}
]
export default routes
<ul>
<!-- User information -->
<li>
<router-link custom :to="{name:'profile.show'}" v-slot="{href, route, navigate,isActive}">
<div>
<span>Profile</span>
</div>
</router-link>
<ul class="dropdown">
<li>
<router-link :to="{name:'edit.show'}">
<span>Edit</span>
</router-link>
</li>
</ul>
</li>
<!-- Basket Transactions -->
<li>
<router-link custom :to="{name:'cart.show'}" v-slot="{href, route, navigate,isActive}">
<div>
<span>Cart</span>
</div>
</router-link>
<ul class="dropdown">
<li>
<router-link :to="{name:'buy.show'}">
<span>Basket</span>
</router-link>
</li>
</ul>
</li>
</ul>
<div>
<router-view />
</div>