Active on `List Item` via active router?

[theara]

I use List Item on sidebar.
I would like to active item list via router active name???

<q-list highlight>
  <q-list-header>Recent chats</q-list-header>
  <q-item>
    <q-item-side>
      <q-item-tile avatar>
        <img src="statics/boy-avatar.png">
      </q-item-tile>
    </q-item-side>
    <q-item-main label="John Doe" />
    <q-item-side right>
      <q-item-tile icon="chat_bubble" color="green" />
    </q-item-side>
  </q-item>
  <q-item>
    <q-item-side avatar="statics/linux-avatar.png" />
    <q-item-main label="Jim Doe" />
    <q-item-side right icon="chat_bubble" />
  </q-item>
  <q-item-separator />
  <q-list-header>Previous chats</q-list-header>
  <q-item>
    <q-item-side avatar="statics/guy-avatar.png" />
    <q-item-main label="Jack Doe" />
  </q-item>
</q-list>

[theara]

Now it work, I used q-scroll-area

      <q-scroll-area class="fit">
        <q-list-header>Left Panel</q-list-header>
        <q-item to="/showcase/layout-demo/play-with-layout">
          <q-item-side icon="account circle" />
          <q-item-main
            label="Play with Layout"
            sublabel="Learn more about it"
          />
          <q-item-side
            right
            icon="thumb_up"
          />
        </q-item>

[theara]

oh maybe problem with <q-item to="/".
And then still have problem with item selected

[theara]

Now I use redirect in Vue Router to break difference path

  {
    path: '',
    redirect: { name: 'home' },
  },
  {
    path: '/home',
    name: 'home',
    component: Home,
  },

[mortyspace]

use exact directive: <q-item clickable v-ripple to="/" exact>

[sibelly]

worked like a charm @mortyspace !