JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>

<div id="app">
  <nav>
    <router-link to="/aaa">AAA</router-link>
    <router-link to="/bbb">BBB</router-link>
  </nav>
  <p>{{ $route.name }}</p>
  <router-view/>
</div>

CSS

#app {
  margin-top: 25px;
  margin-left: 25px;
}

JavaScript

const Test = {
  data() {
      return {
        msg: ''
      }
    },
    template: `<div>
        <p><input v-model="msg"/></p>
        <p>{{ msg }}</p>
       </div>
    `
}

Vue.component('Test', Test);

const Test1 = {
  template: '<Test/>'
}

const Test2 = {
  template: '<Test/>'
}

const router = new VueRouter({
  routes: [{
    path: '/aaa',
    name: 'AAA',
    component: Test1,
  }, {
    path: '/bbb',
    name: 'BBB',
    component: Test2,
  }, ],
});

const vm = new Vue({
  el: '#app',
  router,
  data: {}
});