JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <el-tabs v-model="activeName">
    <el-tab-pane name="foo">
      <router-link slot="label" to="/foo" tag="span">foo</router-link>
    </el-tab-pane>
    <el-tab-pane name="bar">
      <router-link slot="label" to="/bar" tag="span">foo</router-link>
    </el-tab-pane>
    <el-tab-pane name="baz">
      <router-link slot="label" to="/baz" tag="span">foo</router-link>
    </el-tab-pane>
  </el-tabs>
  <router-view></router-view>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

Babel + JSX

const Foo = { template: '<div>foo</div>'}
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }


const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '/baz', component: Baz }
]

const router = new VueRouter({ routes })

var Main = {
  data() {
    return {
      activeName: 'second'
    };
  }
};
var Ctor = Vue.extend({
  data() {
    return {
      activeName: 'baz'
    }
  },
  mounted() {
    this.$router.push({path:'/Baz'})
  },
  router
})
new Ctor().$mount('#app')