VueJS vee-validate issue when passed validation as props to input component

Question

I'm building an input component to work with vee-validate.
for more convenience, I want to use validation rules as a props for this.

Every thing is ok when I use v-model directive on parent. but, with value property; after writing in the field and validating, input value reset to it's parent.
This is logical? if not, how can I solve this problem without v-model?

Note that:

1) - Validations events are 'input' and 'blur'

2) - I never want to set v-on:input event on parent

See This Fiddle

Answer 1

This is logical. @input="$emit('input', $event.target.value)" is useless here because you don't listen to the input event.

When your input is invalid, component is re-render again. value of input component has never change changed when you input. When it re-render, it will display correct value which is passed from parent.

https://jsfiddle.net/787g7q0e/