Принудительное повторное рендеринг компонента vue при нажатии на ссылку маршрутизатора

Question

У меня проблема с попыткой заставить компонент повторно визуализировать при щелчке по навигационной панели, находясь на том же компоненте. Например, я нахожусь на / one - нажатие на навигационную ссылку для / one не выполняет рендеринг компонента, который я бы хотел сделать. Любые яркие идеи о том, как этого добиться?

маршрутизатор:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
import One from '../pages/One.vue'
import Two from '../pages/Two.vue'

const router = new Router({
   mode: 'history',
   routes: [
    { path: '/one', component: One, name: 'One', meta: {title: 'One'} },
    { path: '/two', component: Two, name: 'Two', meta: {title: 'Two'} },
    ]
});
export default router;

nav.vue:

<template>
  <div>
    <ul>
      <li v-for="item in nav">
        <nav-link class="nav-root-link" v-else :link="item"></nav-link>
      </li>
    </ul>
  </div>

</template>

<script>

  import navLink from './navLink.vue'
  export default {
    components: { navLink },
    data () {
      return {
        groupVisible: [],
        nav: [
          { name: 'One', to: {name: 'One'}},
          { name: 'Two', to: {name: 'Two'}},
        ]
      }
    },
  }
</script>

navLink.vue:

<template>
  <router-link class="nav-link" :to="link.to">
    <span class="nav-link-name">{{ link.name }}</span>
  </router-link>
</template>

<script>
  export default {
    props: {
      link: {
        required: true,
        type: Object
      }
    },
  }
</script>

Answer 1

Внутри nav.vue просто добавьте: ключ

<template>
  <div>
    <ul>
      <li v-for="(item, index) in nav" :key="index">
        <nav-link class="nav-root-link" v-else :link="item"></nav-link>
      </li>
    </ul>
  </div>
</template>