JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="app">
  <h1>Hello bus!</h1>
  <p>{{i}}</p>
  <p>
    <router-link to="/demo1">demo1</router-link>
    <router-link to="/demo2">demo2</router-link>
  </p>
  <router-view></router-view>
</div>

CSS

.router-link-active {
  color: red;
}

Babel + JSX

const bus = new Vue({
	data () {
  	return {
  		val1: 0
    }
  },
  created () {
  	this.$on('update1', val => {
    	this.val1 = val
    })
  }
})
const Demo1 = Vue.component('demo1', {
	template: "<div><h1>demo1</h1><div>{{val}}</div></div>",
  computed: {
  	val () {
    	return bus.val1
    }
  }
})
const Demo2 = Vue.component('demo2', {
	template: "<div><h1>demo2</h1><div>{{val1}}</div></div>",
  computed: {
  	val1 () {
    	return bus.val1
    }
  }
})

// router
const routes = [
  { path: '/demo1', component: Demo1 },
  { path: '/demo2', component: Demo2 }
]

const router = new VueRouter({
  routes
})
// app
const app = new Vue({
	data () {
    return {
    	i: 0
    }
  },
  router,
  created () {
    setInterval(() => {
    	bus.$emit('update1', this.i++)
    }, 100)
  }
}).$mount('#app')