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">
<link rel="stylesheet" href="https://rawgit.com/cristijora/vue-form-wizard/master/dist/vue-form-wizard.min.css">
<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" ref="wizard" color="#e67e22">
      <tab-content title="Personal details" icon="ti-user">
        My first tab content
      </tab-content>
      <tab-content title="Additional Info" icon="ti-settings">
        My second tab content
      </tab-content>
      <tab-content title="Last step" icon="ti-check">
        Yuhuuu! This seems pretty damn simple
      </tab-content>
      <template slot="footer" scope="props">
       <div class=wizard-footer-left>
           <wizard-button  v-if="props.activeTabIndex > 0 && !props.isLastStep" :style="props.fillButtonStyle">Previous</wizard-button>
        </div>
        <div class="wizard-footer-right">
          <wizard-button v-if="!props.isLastStep"@click.native="props.nextTab()" class="wizard-footer-right" :style="props.fillButtonStyle">Next</wizard-button>
          
          <wizard-button v-else @click.native="alert('Done')" class="wizard-footer-right finish-button" :style="props.fillButtonStyle">{{props.isLastStep ? 'Done' : 'Next'}}</wizard-button>
        </div>
       
      </template>
    </form-wizard>
  </div>
</div>

CSS

.finish-button{
  background-color:#43A047 !important;
  border-color: #43A047 !important;
}

JavaScript

Vue.use(VueFormWizard)
new Vue({
  el: '#app',
  methods: {
    onComplete: function() {
      alert('Yay. Done!');
    },
    isLastStep() {
      if (this.$refs.wizard) {

        return this.$refs.wizard.isLastStep
      }
      return false
    }
  }
})