JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<div id="app">
  <router-link to="/">/root</router-link>
  <router-link to="/foo">/foo</router-link>
  <router-link to="/boo">/boo</router-link>
  <router-view></router-view>
</div>

Babel + JSX

const createIntervalRouteComponent = nextRoute => ({
  template: '<div>{{ $route.path }} {{ counter }}</div>',
  data() {
    return {
      nextRoute,
      counter: 10,
      interval: null,
    };
  },
  mounted() {
    this.interval = setInterval(() => {
    	if (this.counter-- <= 0) {
    	  this.$router.push({ path: this.nextRoute });
      }
    }, 300);
  },
  beforeRouteLeave(to, from, next) {
    clearInterval(this.interval);
    next();
  },
});

const Root = { template: '<div>Root</div>' };
const Foo = createIntervalRouteComponent('/boo');
const Boo = createIntervalRouteComponent('/foo');

new Vue({
	router: new VueRouter({
    routes: [
      { path: '/', component: Root },
      { path: '/foo', component: Foo },
      { path: '/boo', component: Boo },
    ], 
  }),
  el: '#app',
});