How to debounce/delay showing error message in vee-validate - validation

Question

I am using following versions:
"vue": "^2.1.0",
"vee-validate": "2.0.0-beta.14",
How do I debounce display of an error message.
I tried delay, v-delay and few other in following code but nothing seems to work.
<input type="number" v-validate data-rules="required|numeric" name="number" delay="1800"/>
In earlier version this used to happen via data-vv-delay.

Answer 1

Upgrade to the latest versions of Vue & VeeValidate, then continue using: data-vv-delay:
Vue.use(VeeValidate)
new Vue({
el: '#app',
})
.is-error {
border: 2px solid red;
}
.form-group {
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.17/vee-validate.js"></script>
<div id="app">
<div class="form-group">
<label class="label" for="email">Email</label>
<input
v-validate
data-vv-rules="required|email"
:class="{'is-error': errors.has('email') }"
name="email"
type="text"
data-vv-delay="2000"
placeholder="Email">
<span v-show="errors.has('email')">
{{ errors.first('email') }}
</span>
</div>
<div class="form-group">
<label class="label" for="number">Number</label>
<input
v-validate
data-vv-rules="required|numeric"
:class="{'is-error': errors.has('number') }"
name="number"
type="number"
data-vv-delay="2000"
placeholder="Number">
<span v-show="errors.has('number')">
{{ errors.first('number') }}
</span>
</div>
</div>
The above snippet threw some errors when using your version (Vue 2.1.0 & VeeValidate beta 14). The issue seems to lie with beta 14 being a bit dodgy!