Is there is a better way to capture erros from Vuetify components? - vue.js

Question

I'm using the Vue.js library Vuetify to add a few text field components inside on a component that I create. In order to provide input validation I would like to capture the hasError property of the text field components. I know the path of the property is: this.$children[3]._computedWatchers.hasError.active. But I would like to know if there is another way to access theses properties. Maybe I'm missing something?
<template>
<div class="register">
<form>
<div>
<v-text-field name="new-user-email"
label="Email"
type="email"
single-line
required></v-text-field>
</div>
<div>
<v-text-field name="user-user-password"
label="Password"
type="password"
single-line
required>
</v-text-field>
</div>
<div>
<v-text-field name="new-user-password-confirmation"
label="Confirm Password"
type="password"
single-line
required>
</v-text-field>
</div>
<div #click="registerNewUser">
<v-btn>Register</v-btn>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'register-new-user',
data() {
return {
checked: false
};
},
methods: {
registerNewUser() {
console.log(this.$children[3]._computedWatchers.hasError.active)
console.log('Register a new user')
}
}
};
</script>

Answer 1

Add a ref attribute to the v-text-field component like this:
<v-text-field
ref="password-confirmation"
name="new-user-password-confirmation"
label="Confirm Password"
type="password"
single-line
required
></v-text-field>
Then you can reference the VueComponent instance of the Vuetify text field component (along with its properties and methods) like so:
methods: {
registerNewUser() {
console.log(this.$refs['password-confirmation'].hasError)
}
}
Here's documentation on refs.