Remove active class from v-list-item when v-list-group item is selected

Question

Using Vuetify v-list-item directive (outside) with others v-list-item inside the v-list-group for routing website's pages I'm encountering this issue:

The routing works fine, but every time I click on one of the submenues the index item is still active

When Index is selected

When another item is selected

I want to know if there is something I can do to deactivate the active class of index menu v-list-item when I select a v-list-item inside the v-list-group

Here is my code:

DOM:

<v-navigation-drawer v-model="drawer" app dark>
<v-list>
      <div
        v-for="item in pages"
        :key="item.title"
      >
      <!-- Index -->
      <v-list-item
        v-if="!item.items"
        link
        :to="item.href"
        v-on="on"
      >
        <v-list-item-icon>
          <v-icon color="info">
            {{item.icon}}
          </v-icon>
        </v-list-item-icon>
        <v-list-item-title class="info--text" v-text="item.title">
        </v-list-item-title>
      </v-list-item>
      <!-- group menues -->
      <v-list-group
        v-if="item.items"
        item-color="primary"
        no-action
      >
        <template v-slot:activator>
          <v-icon color="info" style="padding-right:32px">
            {{item.icon}}
          </v-icon>
            <v-list-item-content>
              <v-list-item-title class="info--text" v-text="item.title"></v-list-item-title>
            </v-list-item-content>
        </template>
        <v-list-item
          item-color="primary"
          v-for="child in item.items"
          :key="child.title"
          link
          :to="child.href"
          style="padding-left:40px"
        >
          <v-list-item-icon>
            <v-icon color="info">mdi-circle-medium</v-icon>
          </v-list-item-icon>
            <v-list-item-content v-on="on">
              <v-list-item-title class="info--text" v-text="child.title"></v-list-item-title>
            </v-list-item-content>
        </v-list-item>
      </v-list-group>
      </div>
    </v-list>
  </v-navigation-drawer>

Script:

data: () => ({
drawer: true,
pages: [
    {
      icon: 'mdi-home',
      title: 'Index',
      href: '/main'
    },
    {
      icon: 'mdi-bell',
      items: [
        {
          title: 'submenu1',
          href: '/main/menu1/submenu1'
        },
        {
          title: 'submenu2',
          href: '/main/menu1/submenu2'
        }
      ],
      title: 'menu1'
    },
    {
      icon: 'mdi-cog-outline',
      items: [
        {
          title: 'submenu3',
          href: '/main/menu2/submenu3'
        }
      ],
      title: 'menu2'
    },
    {
      icon: 'mdi-text-box-outline',
      items: [
        {
          title: 'submenu4',
          href: '/main/menu3/submenu4'
        }
      ],
      title: 'menu3'
    }
  ]  })

Thank you!

Answer 1

I found out what the problem was. I was misunderstanding the concept of routing using Vue.

The index item was routing to /main (/main/index), and the others pages included 'main' on their routes, like so: /main/submenu1. Vue understood /main/submenu1 as if it was over main, so /main was "active" too as it contained the same name in the route.

I fixed this by changing the /main route to /main/home. By forcing the route path to be different from the others. I tried using /main/index because Vue was pointing to index the whole time but it didn't work. I just needed to change the page name and the route path.