Vuejs input field validation?

Question

Vue.js

Help me figure it out, in general I implemented this thing: There is an "AppInput" component, it was necessary to implement validation on it through the input parameters

AppInput.vue

<input
      class="field"
      :class="value ? 'has-data' : ''"
      :type="type"
      :required="reqired"
      v-model="input"
      @change="validate"
    >

an array of functions is passed to the rules props

methods: {
    validate (e) {
      if (this.rules) {
        this.message = this.rules.map(fn => fn(this.input))
      }
    }
  }

rules: [
       v => !! v || 'Поле обязательное',
       v => v.length >= 8 || '8 символов'
   ]

In print it works, but you need to make a trace. at the first invalidity of the fields, display a message, but I have them all displayed at once

If in short you need to make an input like Vuetify

Answer 1

this.message = this.rules.map(n => n(this.input)).find(n => n !== true);

Answer 2

1) Here is their implementation https://github.com/vuetifyjs/vuetify/blob/master/p...
2) You can look for ready-made solutions not to cut another bike
3) Return the first message if it is false, and then do not iterate over validators