Can't validate v-text-field [migrating from older version of Vuetify]

Question

I've been migrating an old project from last year since Entity Framework 5 was released. Since I'm also migrating the frontend from the previous version of Vuetify I worked with last year (from 2.2.11 to 2.4.0), I've encountered some issues that I've had to look up online and fix, but I got this sudden issue that I can't quite lay a finger on and haven't been able to find a similar issue with an answer.

I'm trying to validate a v-text-field inside a v-card to not save a record if the v-text-field length is less than 3 or greater than 50 characters. Despite that I've followed up the same code I used last year to validate my v-text-field, I get the following errors on chrome console:

The last 2 errors from this image pop up when you click save when it should show the validation message:

The code used in the component is the following.

For the Validation message that should pop below the description v-text-field in red:

VUE:

<template v-slot:top>
    <v-toolbar flat>   
        <v-dialog v-model="dialog" max-width="500px">
            <template v-slot:activator="{ on, attrs }">
                <v-btn color="primary" dark class="mb-2" v-bind="attrs" v-on="on">New</v-btn>
            </template>
            <v-card>
                <v-container>
                    <v-row>
                        <v-col cols="12" sm="12" md="12">
                            <v-text-field v-model="name" label="Name"></v-text-field>
                        </v-col>
                        <v-col cols="12" sm="12" md="12">
                            <v-text-field v-model="description" label="Description"></v-text-field>
                                </v-col>
                        <v-col cols="12" sm="12" md="12" v-show="valida">
                            <div class="red--text" v-for="v in validaMessage" :key="v" v-text="v">
                            </div>
                        </v-col>
                    </v-row>
                </v-container>
            </v-card>
        </v-dialog>
    </v-toolbar>
</template>

JAVASCRIPT:

<script>
    import axios from 'axios'
    export default {

        data(){
            return {
                categories:[],
                dialog: false,
                dialogDelete: false,
                headers: [
                    { text: 'Options', value: 'actions', sortable: false, class:"primary--text" },
                    { text: 'Name', value: 'name', class:"primary--text" },
                    { text: 'Description', value: 'description', sortable: false, class:"primary--text" },
                    { text: 'Status', value: 'status', sortable: false, class:"primary--text" },
                ],
                search: '',
                desserts: [],
                editedIndex: -1,
                editedItem: {
                    name: '',
                    calories: 0,
                    fat: 0,
                    carbs: 0,
                    protein: 0,
                },
                id: '',
                name: '',
                description: '',
                valida: 0,
                validaMessage:[]
            }
        },
        methods: {
            save () {
                if (this.valida()){
                    return;
                }
                if (this.editedIndex > -1) {
                    //Code to update
                } 
                else {
                    let me=this;
                    axios.post('api/Categories/Create',{
                        'name': me.name,
                        'description': me.description
                    }).then(function(response){
                        me.close();
                        me.list();
                        me.clean();
                    }).catch(function(error){
                        console.log(error);
                    });
                }
            },
            valida(){
                this.valida=0;
                this.validaMessage=[];
                if (this.name.length < 3 || this.name.length > 50){
                    this.validaMessage.push("The name must have between 3 and 50 characters.")
                }
                if (this.validaMessage.length){
                    this.valida=1;
                }
                return this.valida;
           }
       },  
   }
</script>

This is how it used to show like in my older version of the project:

I don't know if something that was changed in the Vuetify update version from 2.2.11 to 2.4.0 is interfering with the ability to implement this method inside the component to be able to show or hide the validation message. I'm trying to resolve this to avoid having to recur to 3rd party validation services like vee-validate or vuelidate. What could it be? Thank you for taking your time in reading this!

Answer 1

To sum up, these were the reasons for the errors:

1. There were a data property and a method with the same name - valida
2. v-btn component had a deleted method initialize provided to @click event.

And another tip as a bonus:

You have a v-col that spans to 12 columns: <v-col cols="12" sm="12" md="12">. Since it should span 12 columns on every screen size, there's really no need to define the columns span for small and medium breakpoints. So in this case it really should be only <v-col cols="12"> - will save you a little file size and loading time.