Почему светиться неверный роут во VUE?

Question

NewSantaClaus @NewSantaClaus

Vue.js

Почему светиться неверный роут во VUE?

Есть роуты

const routes = [
    {
        path: '/posts',
        name: 'posts',
        component: () => import('@/views/posts/Posts.vue')
    },
    {
        path: '/posts/import',
        name: 'posts-import',
        component: () => import('@/views/posts/PostsImport.vue')
    },
    {
        path: '/post/:id([0-9]+)',
        name: 'post',
        component: () => import('@/views/post/Post.vue')
    },
]

При открытии любого из роутов posts и posts-import, обе ссылки подсвечиваются активными. Подскажите способ чтобы при открытии роута posts-import только он светился активным

NavMenuGroup.vue

<template>
  <v-list-group ref="refVListGroup" class="vertical-nav-menu-group text--primary">
    <template #prependIcon>
      <v-icon :class="{ 'alternate-icon-small': !icon }">
        {{ icon }}
      </v-icon>
    </template>
    <template #activator>
      <v-list-item-title>
        {{ title }}
      </v-list-item-title>
    </template>

    <slot></slot>
  </v-list-group>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    icon: {
      type: String,
      required: true,
    },
  },
  setup() {
    return {}
  },
}
</script>

NavMenuLink.vue

<template>
  <v-list-item class="vertical-nav-menu-link" v-bind="$attrs" active-class="bg-gradient-primary white--text">
    <v-list-item-icon>
      <v-icon :class="{ 'alternate-icon-small': !icon }" class="mx-auto">
        {{ icon || alternateIcon }}
      </v-icon>
    </v-list-item-icon>

    <v-list-item-title>
      {{ title }}
    </v-list-item-title>
  </v-list-item>
</template>

<script>
import { mdiCheckboxBlankCircleOutline } from '@mdi/js'

export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    icon: {
      type: String,
      default: undefined,
    },
  },
  setup() {
    return {
      alternateIcon: mdiCheckboxBlankCircleOutl<code lang="javascript">

</code>ine,
    }
  },
}
</script>

Menu

<template>
  <v-list expand shaped class="vertical-nav-menu-items pr-5">
      <nav-menu-group title="Посты" :icon="icons.mdiBriefcaseClock">
          <nav-menu-link title="Посмотреть" :to="{ name: 'posts' }"/>
          <nav-menu-link title="Загрузить" :to="{ name: 'posts-import' }"/>
      </nav-menu-group>
  </v-list>
</template>

<script>
import { mdiBriefcaseClock } from '@mdi/js'
import NavMenuLink from './components/NavMenuLink.vue'
import NavMenuGroup from './components/NavMenuGroup.vue'

export default {
    data: () => ({
        icons: {
            mdiBriefcaseClock
        }
    }),
    components: {
        NavMenuLink,
        NavMenuGroup
    }
}
</script>