title: Vuejs 2: Unable to switch between tabbed form
body: <p>I am using Vue2 for buidling a tab-based form. I am using in my <strong>main.js</strong></p>
  
  <ul>
  <li>import VueFormWizard from 'vue-form-wizard'</li>
  <li>import 'vue-form-wizard/dist/vue-form-wizard.min.css'</li>
  <li>Vue.use(VueFormWizard)</li>
  <li>import VeeValidate from 'vee-validate'</li>
  <li>Vue.use(VeeValidate)</li>
  </ul>
  
  <p>The file <strong>AddUser.vue</strong> comprises of the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  import swal from 'sweetalert'
  
  export default {
    methods: {
      validateFirstTab: function () {
        this.$validator.validateAll().then((result) =&gt; {
          if (result) {
            return
          }
          swal('Input Field(s) Validation', 'Please correct the errors!', 'error')
        })
      }
    }
  }
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
   
   &lt;div class="wrapper" id="add-user-wrapper"&gt;
  
    &lt;section class="content"&gt;
     &lt;form-wizard @on-complete="onComplete" 
               shape="tab"
                        color="#3498db"
                        error-color="#a94442"&gt;
                  &lt;h2 slot="title"&gt;Add a New User&lt;/h2&gt;
               &lt;tab-content title="User Details" :before-change="validateFirstTab"&gt;
                &lt;div class="row"&gt;
                 &lt;div class="col-md-12"&gt;
                   &lt;div class="col-md-4"&gt;
                     &lt;div class="form-group"&gt;
                                  &lt;label class="control-label"&gt;Name&lt;/label&gt;
                                  &lt;input v-model="user.name" v-validate data-vv-rules="required|alpha_spaces" data-vv-delay="500" data-vv-as="Name" class="form-control" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="Enter Name" name="name" autofocus="true" /&gt;
                            &lt;i v-show="errors.has('name')" class="fa fa-warning"&gt;&lt;/i&gt;
                            &lt;span v-show="errors.has('name')" class="help is-danger"&gt;{{ errors.first('name') }}&lt;/span&gt;
                     &lt;/div&gt;
                               &lt;/div&gt;
                                  &lt;/form-wizard&gt;
                                  &lt;/section&gt;
                                  &lt;/div&gt;
                                  &lt;template&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem that I am facing is whenever I am trying to validate the input field it is getting validated correctly but throwing an error on console: "cannot read property then of undefined" while switching to the new tab. I searched through the communities only to get back a solution of returning a Promise with resolve(true) always but still unfortunately, even with a valid input in the first tab, I am unable to switch to the next tab(code not given in the html below).</p>
  
  <p>Can someone help me out in this regard as to what or how should be the approach? As I am quite new to Vue, please let me know if you need any further details</p>