Vuetify "this.form.validate() is not a function"

I have a simple v-form component and im trying to validate it, Vuetify documentation says that using this.form.validate() does, but when i call for it i just receive this error in console:

My code is this here:

<!-- LoginView.vue -->
<template>
    <v-container fluid>
        <v-row no-gutters justify="center">
            <v-col cols="5">
                <v-card flat ref="form" tile outlined>
                    <v-card-text>
                        <v-form ref="form" v-model="valid">
                            <v-row>
                                <v-col cols="12">
                                    <v-text-field v-model="email" :rules="[rules.required, rules.email]" outlined label="Email" hide-details="auto"/>
                                </v-col>
                            </v-row>
                        </v-form>
                    </v-card-text>
                    <v-card-actions>
                        <v-spacer/>
                        <v-btn @click="login()">Validate</v-btn>
                    </v-card-actions>
                </v-card>
            </v-col>
        </v-row>
    </v-container>
</template>

// LoginView.vue
@Component
export default class LoginView extends Vue {

    @Ref() readonly form!: HTMLFormElement
    valid: boolean = false
    email: string = ""

    //Right here im just calling for all of my field rules who are stored in another file, please ignore.
    get rules() { return Rules }

    login() {
        console.log(this.form.validate())
    }

}

</script>

I dont get it, form.validate() used to work in my previous projects...I tried even updating my vue and vuetify dependencies but it didn't worked, heres my current package.json content:

{
  "name": "decorators-project-template",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@mdi/font": "5.9.55",
    "axios": "^0.21.1",
    "please-wait": "^0.0.5",
    "roboto-fontface": "*",
    "vue": "^2.7.10",
    "vue-axios": "^3.3.7",
    "vue-class-component": "^7.2.3",
    "vue-debounce": "^3.0.1",
    "vue-line-clamp": "^1.3.2",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.2.0",
    "vue-template-compiler": "^2.7.10",
    "vuetify": "^2.6.10",
    "vuex": "^3.4.0",
    "vuex-module-decorators": "^1.0.1"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "json2typescript": "^1.5.1",
    "typescript": "~4.1.5",
    "vue-cli-plugin-vuetify": "~2.4.1"
  }
}