I use v-snackbar to show alert messages from API responses.

At the same time, I would like to make my name input field (v-model="form.values.name") become invalid. I want to see red border and so on. Is there a way to force an .invalid class to input type text of Vuetify ?

Input

<v-text-field
    dense
    outlined
    v-model="form.values.name"
    :rules="form.rules.name"
    label="Name"
    required
></v-text-field> 

    

Snackbar

<v-snackbar transition="true" timeout="2000" v-model="alert" absolute top :color="alertColor" outlined right>
    <strong>
        {{ alertMessage }}
    </strong>
</v-snackbar>

API check

axios.post(BACK_END_API, body).then((response) => {
        if (response.data.status == 0) {
            ...
        } else {
             
            // I AM HERE ⬇️

            this.alert = true
            this.alertColor = 'red'
            this.alertMessage = response.data.failures[0].detail
        }
    })
}