Проверка ввода Vue.js с VeeValidate - Как избежать действия onInput, пока оно недействительно

Я проверяю поле ввода (требуется, минимальная длина 3) с помощью плагина VeeValidate .. он работает нормально, но как я могу избежать вызова действия onInput (чтобы избежать фиксации в хранилище, когда ввод становится недействительным (как только ввод aria- неверный переход на false)

вкратце сказал: есть ли способ переключить вызов / не вызов onInput: 'changeTitle', когда поле ввода aria-invalid имеет значение false / true?

спасибо за отзыв

ChangeTitleComponent.vue

    <template>
      <div>
        <em>Change the title of your shopping list here</em>
        <input name="title" data-vv-delay="1000" v-validate="'required|min:3'" :class="{'input': true, 'is-danger': errors.has('required') }" :value="title" @input="onInput({ title: $event.target.value, id: id })"/>
        <p v-show="errors.has('title')">{{ errors.first('title') }}</p>
      </div>
    </template>

    <style scoped>
    </style>

    <script>
      import { mapActions } from 'vuex'
      import Vue from 'vue'

      import VeeValidate from 'vee-validate'
      Vue.use(VeeValidate)

      export default {
        props: ['title', 'id'],
        methods: mapActions({  // dispatching actions in components
          onInput: 'changeTitle'
        })
      }
    </script>

vuex / actions.js

    import * as types from './mutation_types'
    import api from '../api'
    import getters from './getters'

    export default {
      ...
      changeTitle: (store, data) => {
        store.commit(types.CHANGE_TITLE, data)
        store.dispatch('updateList', data.id)
      },

      updateList: (store, id) => {
        let shoppingList = getters.getListById(store.state, id)
        return api.updateShoppingList(shoppingList)
        .then(response => {
          return response
        })
        .catch(error => {
          throw error
        })
      },
      ...
    }

ОБНОВЛЕНИЕ

Я попытался захватить входное значение с помощью @ input = "testValidation) и проверить действительное входное значение (обязательно), если оно действительное (aria-invalid: false), затем я испускаю входное значение, но реквизиты не обновляются в родительском компоненте, и действие vuex 'changeTitle' не запускается

    <template>
      <div>
        <em>Change the title of your shopping list here</em>
        <input name="title" ref="inputTitle" data-vv-delay="1000" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('required') }" :value="title" @input="testValidation({ title: $event.target.value, id: id })"/>
        <p v-show="errors.has('title')">{{ errors.first('title') }}</p>
      </div>
    </template>

    <script>
      import { mapActions } from 'vuex'
      import Vue from 'vue'

      import VeeValidate from 'vee-validate'
      Vue.use(VeeValidate)

      export default {
        props: ['title', 'id'],
        methods: {
          testValidation: function (value) {
            const ariaInvalid = this.$refs.inputTitle.getAttribute('aria-invalid')
            if (ariaInvalid === 'false') {
              this.$nextTick(() => {
                this.$emit('input', value) // should change props in parent components
              })
            } else {
              console.log('INVALID !') // do not change props
            }
          },
          ...mapActions({
            onInput: 'changeTitle' // update store
          })
        }
      }
    </script>