VueJS Router - How do I stop multiple active routes when using sub routes and Vuetify?

Question

I am struggling to stop the default '' Home.vue route not be active in Vuetify i.e. when I click uploads or settings the default Home.vue is still active. See here:

I assume it's something to do with it being a sub route of /webapp but I'm banging my head against a wall..

This is the important bit in my routes:

    {
  path: '/webapp',
  name: 'webapp',
  component: () => import('./views/Webapp.vue'),
  children: [
          {
            path: '',
            component: () => import('./components/Home.vue'),
          },
          {
            path: 'uploads',
            component: () => import('./components/Uploads.vue'),
          },
          {
            path: 'settings',
            component: () => import('./components/Settings.vue'),
          }
  ]
}

This is my Vuetify drawer:

<v-navigation-drawer
  v-model="drawer"
  app

>
  <v-list dense>

    <v-list-item
      v-for="item in items"
      :key="item.title"
      :to="item.route"

    >
      <v-list-item-icon>
        <v-icon>{{ item.icon }}</v-icon>
      </v-list-item-icon>

      <v-list-item-content>
        <v-list-item-title>{{ item.title }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>

  </v-list>
</v-navigation-drawer>

Answer 1

You have to add exact (or exact={true}) prop to <v-list-item> component:

<v-list-item
  v-for="item in items"
  :key="item.title"
  :to="item.route"
  exact

></v-list-item>

On v-list-item docs for exact:

Exactly match the link. Without this, '/' will match every route. You can find more information about the exact prop on the vue-router documentation.

You can check that out:

https://vuetifyjs.com/en/components/list-item-groups#list-item-groups