Watcher for errors computed property does not work to be able to $emit if the input is valid or not

Versions:

• VueJs:“^2.5.16”
• Vee-Validate: “^2.1.0-beta.1”

Description:

I am trying to implement a custom input component that can be reused with a variety of props. The problem arises when i want to emit if the input is valid or not. The problem is, from what i can understand, that the errors computed property is refreshed in next tick. For that reason, when the @input or @blur event are emitted is still populated with the old validations and if it is the first event then errors property is not populated at all.

The best solution would be to watch the errors computed property and emit if the input is valid or not when needed but it does not trigger. The fields computed property can be watched but it does not update if it is not actually used somewhere in the component.

Can i get i little help whit this?

This is a snippet of the implementation

<template>
...
 <input
          class="form-control"
          :value="value"
          :placeholder="placeholder"
          @input="onEvent"
          @blur="onEvent"
          v-validate="validations"
          :type="type"
          :disabled="disabled"
          :name="name"
          :data-vv-as="alias">
...
</template>

<script>
...
    watch: {
      errors: function (errorsNew) {
        console.log('errors watch',errorsNew)
      },
      fields: function (fieldsNew) {
        console.log('fields watch',fieldsNew)
      },
    },
...
</script>

Steps To Reproduce:

I added a working simplified version for clarification https://codesandbox.io/s/4q8vonzjp9 #

[logaretm]

I updated your example with the solution I proposed, cheers.

https://codesandbox.io/s/k95nq798ro

[fessacchiotto]

Thank you. Very useful answer.