How to validate on input event with vee validate 3 - vue.js

Question

I'm trying to make validation on input event, but the problem that when the event onInput fire in console.log(valid) - is not correct value because it validates the previos character, how to validate correcty on input event?
question.vue
<template>
<div>
<ValidationProvider v-slot="{ errors, passed }" name="question" rules="required|max:10000">
<e-form-group :error="errors[0]">
<template v-slot:label>
Question Text
</template>
<e-textarea
v-model="question"
name="question"
size="small"
#input="onInput($event, passed, name)"
></e-textarea>
</e-form-group>
</ValidationProvider>
<ValidationProvider v-slot="{ errors, passed }" name="button" rules="required|max:10000">
<e-form-group :error="errors[0]">
<template v-slot:label>
Button Text
</template>
<e-textarea v-model="button" name="button" size="small" #input="onInput($event, passed, name)"></e-textarea>
</e-form-group>
</ValidationProvider>
</div>
</template>
<script>
export default {
name: 'Question',
props: {
questionId: {
type: Number
}
},
data: () => ({
question: '',
button: '',
}),
methods: {
onInput(event, valid, name) {
console.log(event);
console.log(valid);
if (!valid) this.$emit({questionId: this.questionId, name: name})
},
},
};
</script>

Answer 1

The default is to validate on input already, so what you want to do is trigger the validation yourself, get the result, and then emit your event:
<ValidationProvider v-slot="{ errors, validate }" name="question" rules="required|max:10000">
<e-form-group :error="errors[0]">
<template v-slot:label>
Question Text
</template>
<e-textarea
v-model="question"
name="question"
size="small"
#input="onInput($event, validate, name)"
></e-textarea>
</e-form-group>
</ValidationProvider>
methods: {
onInput(event, validate, name) {
var self = this;
validate(event).then(function(result) {
if (result.valid) self.$emit({questionId: self.questionId, name: name})
});
},
},