How to watch computed vee-validate errors?

Question

I have vee-validate validating an input field. Every time an invalidation error occurs in the input field, I would like for an event to be emitted.

I thought it best, therefore, to just created a computed field that represents the $validator.errors.

The issue is that the the $emit event in watch never gets fired.

My code is as such:

<template>

  <input 
    type="number" 
    name="quantity" 
    v-validate="{
      max_value: 50
    }" />

</template>

<script> 

export default {
  data () {
    return {}
  },

  computed: {
    formErrors () {
      const errors = this.$validator.errors;

      return errors;
    },
  },


  watch: {
    formErrors (value) {
      return this.$emit('form-errors', value)
    }
  }

}
</script>

Answer 1

Ok, after a tiny bit more research, this is a simple fix.

formErrors : {
  handler (value) {
    return this.$emit('form-errors', value)  
  },

  deep:true 
}

You need to deep watch the handler.