Hide/delay password confirmation error in Vee validate - validation

Question

When I use Vee-validate library in Vuejs, when I focus on password field, it show the error not match with password confirm.
My code:
<input v-validate="'required|min:6|confirmed'" type="password" class="form-control" id="password" name="password" placeholder="New Password" v-model="password"></input>
<span class="is-danger" v-if="errors.has('password')">{{errors.first('password')}}</span>
<input v-validate="'required'" type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Verify password">
How can I use it and do not display the errors until focus password confirm field?

Answer 1

Okay, I searched for the solution longer than I should but there doesn't seem a built-in way in vee-validate, so I came up with my own solution.
Vue.use(VeeValidate)
new Vue({
el: '#app',
data: {
password: '',
password_confirmation: ''
},
computed: {
onConfirm () {
if(this.errors.items.length){
return this.errors.items.find(f => {
return f.rule !== "confirmed"
})
}
}
}
})
<script src="https://unpkg.com/vee-validate#2.0.5/dist/vee-validate.js"></script>
<script src="https://unpkg.com/vue#2.5.9/dist/vue.js"></script>
<div id="app">
<input v-validate="'required|min:6|confirmed'"
type="password"
class="form-control"
id="password"
name="password"
placeholder="New Password"
v-model="password">
</input>
<span class="is-danger"
v-if="errors.has('password') && onConfirm">
{{errors.first('password')}}
</span>
<input v-validate="'required'"
type="password"
class="form-control"
id="password_confirmation"
name="password_confirmation"
placeholder="Verify password"
v-model="password_confirmation"
>
<span class="is-danger"
v-if="!onConfirm &&
password_confirmation">
{{errors.first('password')}}
</span>
</div>