JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://rawgit.com/lykmapipo/themify-icons/master/css/themify-icons.css">
<link rel="stylesheet" href="https://rawgit.com/cristijora/vue-form-wizard/master/dist/vue-form-wizard.min.css">
<script src="https://npmcdn.com/[email protected]/dist/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://rawgit.com/cristijora/vue-form-wizard/master/dist/vue-form-wizard.js"></script>
<div id="app">
<div>
    <form-wizard @on-complete="onComplete"
                shape="circle"
                color="#e74c3c">
      <tab-content title="Personal details"
                   route="/first"
                   icon="ti-user">
      </tab-content>
      <tab-content title="Additional Info"
                   route="/second"
                   icon="ti-settings">
      </tab-content>
      <tab-content title="Last step"
                   route="/third"
                   icon="ti-check">
      </tab-content>
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
      
    </form-wizard>
 </div>
</div>

CSS

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

JavaScript

const First = { template: '<div>First page</div>' }
const Second = { template: '<div>Second page</div>' }
const Third = { template: '<div>Third page</div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/first', component: First },
    { path: '/second', component: Second },
    { path: '/third', component: Third }
  ]
});
Vue.use(VueRouter)
Vue.use(VueFormWizard)
new Vue({
 router,
 el: '#app',
 methods: {
  onComplete: function(){
      alert('Yay. Done!');
   },
   test: function(){
   }
  }
})