JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.4.0/vue-router.js"></script>
<div id="app">
  <router-view></router-view>
  <router-link to="/foo">Foo</router-link>
  <router-link to="/bar">Bar</router-link>
</div>

JavaScript

var events = Vue.extend({
updated(){
  	console.log('updated')
    this.drawMap()
  },
  beforeUpdate(){
     console.log("before update...")
  },
  beforeRouteLeave(to, from, next){
     console.log("before route leave...")
     console.warn("foo", document.querySelector('#foo'));
     console.warn("bar", document.querySelector('#bar'));
     next();
  },
  mounted() {
  	console.log('mounted')
  }
})


const bar = events.extend({template:'<div id="bar">bar<div>'})

const foo = events.extend({template:'<div id="foo">foo</div>'})


var router =  new VueRouter({
  routes: [
    {
      path: '/foo',
      name: 'foo',
      component: foo
    },
    {
      path: '/bar',
      name: 'bar',
      component: bar
    }
  ]
})

Vue.use(VueRouter)

new Vue({
	el: "#app",
  router
}).$mount('#app')