JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.0-rc.5/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-rc.6/vue.min.js"></script>
<div id="app"></div>

JavaScript

Vue.use(VueRouter)

let SimpleComponent = Vue.extend({
    data() {
    	return {
        	message: ''
        }
    },
	created() {
        console.log('Simple component created.')
        
        this.message = 'Hello simple component.'
        
        this.$on('custom-event', message => console.log('Simple component heard: ' + message))
        
        setTimeout(() => { this.$emit('custom-event', this.message) }, 500)
    }
})

const router = new VueRouter({
	mode: 'history',
    routes: [
    	{ path: '/', component: new SimpleComponent() }
    ]
})

const app = new Vue({
	router,
    created() {
    	console.log('App created.')
        
        this.$on('custom-event', message => console.log('App heard: ' + message))
    }
}).$mount('#app')