Vue JS две кнопки в разных компонентах отображают один и тот же компонент только один раз

Question

Здравствуйте. Чтобы поблагодарить вас за ваше время, я новичок в Vue, и я застрял с этим:
У меня есть панель навигации со ссылкой, которая отображает компонент проекта.
Тогда в компоненте Home у меня есть кнопка, которая должна загружать тот же компонент, что и панель навигации.
Это работает, НО только один раз, если я нажму кнопку в нижней части раздела Home, она приведет меня к проектам, а затем я не могу go вернуться к домашнему компоненту. Мне нужно go в Info, а затем я могу go вернуться на главную кнопку, кнопка больше не приводит меня на страницу проекта.

Main. vue

  <div class="container">
    <navbar @pageWasChanged="currentPage = $event"></navbar>
    <keep-alive>
      <component @pageWasChanged="currentPage = $event" :is="currentPage"></component>
    </keep-alive>
  </div>
</template>

Navbar

<ul class="navigationMenu">
  <li><a @click="pageSelected = 'heropage'">Home</a></li>
  <li><a @click="pageSelected = 'aboutpage'">About</a></li>
  <li><a @click="pageSelected = 'infopage'">Info</a></li>
  <li><a @click="pageSelected = 'gridpage'">Projects</a></li>
  <li><a @click="pageSelected = 'contactpage'">Contact</a></li>
</ul>

Кнопка в Home

<div class="btn btnHero" @click="pageSelected = 'gridpage'">See Projects</div>

Импорт в Navbar и Home

<script>
import pageMixin from "./pageMixin.js";
export default {
  data: function() {
    return {};
  },
  mixins: [pageMixin]
};
</script>

Mixin

export default {
  data: function() {
    return {
      pageSelected: '',
    }
  },
  watch: {
    pageSelected: function() {
      this.$emit('pageWasChanged', this.pageSelected)
    },
  },
}