How to force vuejs to reload a component?

Question

JavaScript

Added a question.
There is such a component

var testComponent = Vue.component('main-section', (resolve) => {
            axios.post('/test.php').then( (res) => {
                resolve({ 
                    template: res.data,
                    mounted: () => {
                        console.log('mounted-' + new Date().getTime());
                    }
                });
            });
        });

also a router

var router = new VueRouter({
   routes: [
{ path: '/foo', component: testComponent }, 
{ path: '/bar', component: testComponent },
{ path: '*', component: testComponent }],
   mode: 'history'
});

<router-link to="/foo"></router-link>
<router-link to="/bar"></router-link>
<router-link to="/somelink"></router-link>
<section class="content">
        <router-view :key="$route.fullPath"></router-view>
</section>

The essence of the problem is that the component loads the template only once, then when the page address changes,
mounted is triggered, but the component itself is not redrawn, that is, it does not make an ajax request to the server. In fact, the situation is this - it is necessary that a different template is loaded in the router-view, depending on the path. The ability to create a separate component for each route is not suitable, because the paths are dynamic and the server returns different content for each path. And the routes themselves are also unknown in advance. Generally when I click on links - console.log('mounted-' + new Date().getTime()); works, but the new template is not loaded from the server.

Answer 1

//App.vue

<template>
  <div id="app">
    <router-link to="/random/12323jlwe">12323jlwe</router-link>|
    <router-link to="/random/cxz98c7zf8a">cxz98c7zf8a</router-link>|
    <router-link to="/random/90cvuiwa-r">90cvuiwa-r</router-link>
    <section class="content">
      <router-view :key="$route.fullPath"></router-view>
    </section>
  </div>
</template>

//main.js

import Vue from "vue";
import Router from "vue-router";
import App from "./App.vue";

Vue.use(Router);

var testComponent = Vue.component("main-section", {
  template: `<component :is="template"></component>`,
  data() {
    return {
      template: Vue.compile("<div>please stand by</div>")
    };
  },
  created() {
    // axios.post...
    setTimeout(() => {
      this.template = Vue.compile(`<div>${this.$route.fullPath}</div>`);
    }, 2000);
  },
  mounted() {
    console.log("mounted-" + new Date().getTime());
  }
});

const router = new Router({
  mode: "history",
  routes: [{ path: "/random/:random", component: testComponent }]
});

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  render: h => h(App)
});

https://codesandbox.io/s/50v0xwyzv4

Answer 2

The answer to your question