How to avoid Vuetify navigation drawer always selecting index route as active

Question

I have a nuxt.js+vuetify application with this pages sctructure:

pages
  |_ dashboard
     |_ index.vue
     |_ page1.vue
     |_ page2.vue

When I use the v-navigation-drawer component for including menu items for routes /dashboard, /dasboard/page1 and /dasboard/page2 (using :to), my dasboard-pointing item always remains active, no matter if I am on page1 or page2. The page1 or page2 items are marked as active correctly when I am in the correspondent route, but dashboard is always active too.

This is how I am including the menu items:

        <v-list dense class="pages-list">
          <v-list-item
            v-for="(link, i) in links"
            :key="i"
            :to="link.to"
            class="v-list-item"
          >
            <v-list-item-action>
              <v-icon>{{ link.icon }}</v-icon>
            </v-list-item-action>
            <v-list-item-title
              v-text="link.text"
            />
          </v-list-item>
        </v-list>

And this is my items array:

      links: [
        {
          to: "/dashboard",
          icon: "mdi-home",
          text: this.$t("dashboard")
        },
        {
          to: "/dashboard/page1",
          icon: "mdi-chart-bar",
          text: this.$t("page1")
        },
        {
          to: "/dashboard/page2",
          icon: "mdi-clipboard-outline",
          text: this.$t("page2")
        },
      ],

Answer 1

Add the exact prop to the v-list-item component.