<form id="demo" @submit.prevent="validateBeforeSubmit()">
  <div class="input-group">
    <div class="input-group-addon">
      Enter Password
    </div>

    <div class="input-fields">
      <input v-validate="'required'" name="password" type="password" class="form-control" placeholder="Password" ref="password">

      <input v-validate="'required|confirmed:password'" name="password_confirmation" type="password" class="form-control" placeholder="Password, Again" data-vv-as="password">
    </div>
  </div>

  <div class="alert alert-danger" v-show="errors.any()">
    <div v-if="errors.has('password')">
      {{ errors.first('password') }}
    </div>
    <div v-if="errors.has('password_confirmation')">
      {{ errors.first('password_confirmation') }}
    </div>
  </div>

  <button type="submit" class="btn btn-primary">
        Validate!
    </button>
</form>

<div class="footer">
  This demo used as an example in the <a href="http://zaclee.net/vue/password-confirmation-validation-with-vue-and-vee-validate" target="_blank">vee-validate password confirmation</a> article on zaclee.net.
</div>

form {
  max-width: 500px;
  width: 100%;
  margin: 30px auto;
  border: 1px solid #ccc;
  padding: 15px;
  background: #fafafa;
}

.input-group {
  padding: 15px;
}

.input-fields {
  width: 100%;
}

input[type=password] {
  width: 100% !important;
  display: block !important;
}

button {
  margin: 0 auto;
  display: block !important;
  width: 200px;
  cursor: pointer;
}

.footer {
  text-align: center;
  font-size: 13px;
}

Vue.use(VeeValidate);

var vueDemo = new Vue({
  el: '#demo',
  methods: {
    validateBeforeSubmit() {
      this.$validator
        .validateAll()
        .then(function(response) {
          // Validation success if response === true
        })
        .catch(function(e) {
          // Catch errors
        })
    }
  }
});