Nav items having active class even when I change

I am facing this issue with navigation. Whenever I switch the tabs, the route with "" keeps being active all the time no matter what. I tried using router-exact css, but whenever I go in nested route then the menu nav stops having active class. I believe this is because the path is ""

Router:

    {
        path: "",
        name: "Item1",
        component: Item
   }

Component

      <router-link :to="{ name: 'Item1' }" >Item1</router-link>
      <router-link :to="{ name: 'Item2' }" >Item2</router-link>
      <router-link :to="{ name: 'Item3' }" >Item3</router-link>

The lighter color is active class How it looks