Vue, vuetify: How to validate input immediately after creating, adding it - vue.js

Question

I'm trying to figure out how to validate inputs immediately after adding them:
template:
<div id="app">
<div
v-for="(message, index) in messages"
:key="index"
>
<v-text-field
v-model="messages[index]"
:rules="[v => !!v || 'Error: Please enter text']"
/>
</div>
<v-btn #click="add()">Add input</v-btn>
</div>
JS:
new Vue({
el: '#app',
data: {
messages: ['Hi', 'Hello'],
},
methods: {
add(val) {
this.messages.push(val);
},
},
});
Codepen: https://codepen.io/Zurab-D/pen/dymGaRY
What I mean is that when the button is clicked, a new input appears and there is no "Error: Please enter text" error message by default.
Can I make this message appear immediately?

Answer 1

You can put your template's code, where you use v-for directive, between v-form tags:
<v-form ref="form">
<div v-for="(message, index) in messages" :key="index">
<v-text-field v-model="messages[index]"
:rules="[v => !!v || 'Error: Please enter text']" />
</div>
<v-btn #click="add()">Add input</v-btn>
</v-form>
and then inside add() method validate form by using built-in validate() function in v-form reference
async add(val) {
this.messages.push(val);
await this.$nextTick(); // wait until a new text-field will be rendered
this.$refs.form.validate(); //validate form
},
An example on CodePen is here

Answer 2

To achieve this you can use this.$refs.form.validate(). Wrap your inputs inside <v-form> tag and add an attribute ref="form".
Live Demo :
new Vue({
vuetify: new Vuetify(),
data: {
messages: ['Hi', 'Hello']
},
methods: {
required: value => !!value || 'Please enter text',
add(val) {
this.messages.push(val);
setTimeout(() => {
this.$refs.form.validate();
})
}
}
}).$mount('#app')
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css"/>
<div id="app">
<v-app>
<v-form ref="form">
<div v-for="(message, index) in messages" :key="index">
<v-text-field v-model="messages[index]" :rules="[required]"/>
</div>
<v-btn #click="add()">Add input</v-btn>
</v-form>
</v-app>
</div>