JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/lykmapipo/themify-icons/master/css/themify-icons.css">
<script src="https://rawgit.com/cristijora/vue-form-wizard/master/dist/vue-form-wizard.js"></script>
<link rel="stylesheet" href="https://rawgit.com/cristijora/vue-form-wizard/master/dist/vue-form-wizard.min.css">
<div id="app">
<div>
  <form-wizard @on-complete="onComplete">
    <tab-content v-for="tab in tabs"
                v-if="!tab.hide"
                :key="tab.title"
                :title="tab.title"
                :icon="tab.icon">
      <component :is="tab.component"></component>
    </tab-content>
  </form-wizard>
 </div>
</div>

JavaScript

Vue.use(VueFormWizard)
Vue.component('step1', {
 template:` <div> My first tab content <br>
     		 </div>`
 }
)
Vue.component('step2', {
 template:`<div>  My second tab content </div>`
})
Vue.component('step3', {
 template:`<div>  My third tab content </div>`
})
Vue.component('step4', {
template:`<div> Yuhuuu! This seems pretty damn simple </div>`
})
new Vue({
 el: '#app',
 data() {
 	return {
    tabs: [{title: 'Personal details', icon: 'ti-user', component: 'step1'}, 
    {title: 'Is Logged In?', icon: 'ti-settings', component: 'step2', hide: false}, 
    {title: 'Additional Info', icon: 'ti-location-pin', component: 'step3'},
    {title: 'Last step', icon: 'ti-check', component: 'step4'},
    ],
  }
 },
 methods: {
  onComplete: function(){
      alert('Yay. Done!');
   }
  }
})