Vue ссылки роутера не переходят на запрашиваемую страницу при клике

Question

У меня есть vue роутер, который управляет ссылками меню моей пользовательской темы на WordPress vue. Я новичок в vue js, поэтому после небольшого прочтения документации и тестирования кода я могу перемещаться по сайту, используя REST API и слаг страниц / постов. У меня возникла небольшая проблема с навигацией. Если я нажму на ссылку меню a после загрузки сайта, изначально относительное содержимое страницы не будет загружено, мне нужно нажать на другие ссылки меню, и маршрутизация начнет Работа. Есть ли исправление? Вот код, который я использую для компонентов:

компоненты. js

Vue.component('theme-nav',{
  template: '#menu-tpl',
  data(){
    return {
      menuLinks: []
    }
  },
  mounted: function(){
    this.getMenu();
  },
  methods: {
    getMenu: function(){
      axios.get('wp-json/theme/v1/menu').then( (response) => {
        //console.log(response.data);
        response.data.forEach( (item, i) => {
            this.menuLinks.push(item);
            //console.log(item.url);
        });
      });
    },
    getPathname: function(url){
        var u = new URL(url);
        return u.pathname;
    }
  }
});
// here i need to find a way to load the homepage when site open without hardcode the slug
Vue.component('theme-home',{
  template: '#home-tpl',
  data(){
      return{
        pageData: []
      }
  },
  mounted: function(){
    this.getPage();
  },
  methods: {
    getPage: function(){
        axios.get('wp-json/wp/v2/pages?slug=home')
        .then( (response) => {
            console.log(response.data);
        });
    }
  }
});

Vue.component('theme-page',{
  template: '#page-tpl',
  data(){
    return{
      pageData: []
    }
  },
  watch: {
    $route(to, from){
      console.log(to, from);
      this.getPage();
    }
  },
  methods: {
    getPage: function(){
      console.log(this.$route.params.slug);
      axios.get('../wp-json/wp/v2/pages?slug='+ this.$route.params.slug+'&_embed')
      .then( (response) => {
        console.log(response.data);
        response.data.forEach( (item, i) => {
          this.pageData = [item];
        });
      });
    }
  }
});

Этот код я использую для шаблонов, которые хранятся внутри footer.php файл моей темы

<!-- vue templates prototype -->

<script type="text/x-template" id="menu-tpl">
  <nav class="navbar navbar-expand-md fixed-top">
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav">
          <li class="nav-item" v-for="link in menuLinks" :key="link.id">
            <router-link :to="getPathname(link.url)" class="nav-link">
              {{ link.title }}
            </router-link>
          </li>
      </ul>
    </div>
  </nav>
</script>

<script type="text/x-template" id="home-tpl">
  <div class="container p-0 pt-5 mt-5">
    <h1>Test</h1>
  </div>
</script>

<script type="text/x-template" id="page-tpl">
  <div class="container-fluid p-0">

    <div class="row m-0" v-for="page in pageData">
      <div class="col-sm-12 col-md-12 col-lg-12 p-0" v-if="page._embedded['wp:featuredmedia'][0].source_url">
        <img class="img-fluid w-100" :src="page._embedded['wp:featuredmedia'][0].source_url">
      </div>
    </div>

    <div class="row m-0" v-for="page in pageData">
      <div class="col-sm-12 col-md-12 col-lg-12 p-5 mt-5">
        <h1>{{ page.title.rendered }}</h1>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-12 p-5 mt-5" v-html="page.content.rendered"></div>    
    </div>

  </div> <!-- end container-fluid -->
</script>
<!-- TODO: Template -->
<script type="text/x-template" id="post-tpl">
  <div class="container p-0 pt-5 mt-5">
    <h1>Post template</h1>
  </div>
</script>

<?php wp_footer(); ?>
  </body>
</html>

Это код моего index.php файла и файла app.js, в котором создается основной экземпляр vue

//index.php

<?php get_header(); ?>

<div id="theme">
    <theme-nav></uptheme-nav>
    <router-view></router-view>
</div>

<?php get_footer(); ?>


//app.js
const homepage = { template: '<uptheme-home></uptheme-home>' }
const page = { template: '<uptheme-page></uptheme-page>' }

// NB: to make the things working on my localhost, I need to add the path where wordpress is running that is "/wordpress", on production I will remove it...  
const routes = [
  { 
    path: '/wordpress', 
    component: homepage
  },
  { path: '/wordpress/:slug',
    component: page
  }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

new Vue({
  el: '#theme',
  router,
  data: {}
});