How to use the VListGroup component itself to be a navigation Item for page navigation

[YSHgroup]

The VList used for VNavigationDrawer and every VListItem works like RouterLink with to props.
Also, there are some cases VListGroup must work like that too. For example, When clicking the VListGroup, sub list should be dropped down and the appropriate page will be opened at the same time.
Please think of the following navigation structure.

User (/user)
  |-- Profile (/user/profle)
  |-- Security (/user/security)

So, I've tried the following way:

 <v-list-group
    :value='item.title'
  >

    <template v-slot:activator='{props}'>
      <v-list-item 
        v-bind:='props' 
        :value='item.title'
        :title='item.title' 
        :to='item.to ? item.to: undefined'
        rounded
        color='secondary'
      >

However, the result wasn't as expected, the page reloaded (You know SPA has no page reloading while navigation.) while navigation works, and therefore the sub list never open.

Please help me resolve this problem.