I’m currently making a sign up form that should only submit when all input fields pass the validation. I’ve written rules to validate the fields and they are working as intended. The problem lies in the signUp() method that is called when the submit button is clicked. Even if one of the fields is left blank, this.$refs.form.validate() still evaluates to true (the success alert shows up) and I’m not sure why. Any help is appreciated!

Template:

<v-card class="mt-10 m-5 bg-light-blue-lighten-3" elevation="4">
        <v-card-title class="text-center">Sign Up</v-card-title>
        <v-container class="bg-white" fluid>
            <v-form ref="form" fast-fail class="mx-5 my-4" >
                <v-text-field class="my-1" v-model="username" label="Username" :rules="requiredRule" ></v-text-field>
                <v-text-field 
                    class="my-1" 
                    v-model="password" label="Create Password" 
                    :rules="[...requiredRule, ...pwRule]"
                    :append-inner-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
                    :type="show ? 'text' : 'password'"
                    @click:append-inner="show = !show">
                </v-text-field>
                <v-text-field type="password" class="my-1" v-model="confirm_pw" label="Re-enter Password" :rules="[...requiredRule, ...matchRule]"></v-text-field>
                <div class="d-flex justify-center mt-4">
                <v-btn elevation="4" @click="signUp">Submit</v-btn>
                </div>
            </v-form>
            <v-alert v-if="msg == 'success'" type="success" title="Success" text="Successfully signed up." class="ma-2" :height="60"></v-alert>
            <v-alert v-if="msg && msg != 'success'" type="error" title="Error"class="ma-2" :height="60">{{msg}}</v-alert>
        </v-container>
    </v-card>

Script:

data(){
        return{
            show:false,
            msg:'',
            username:'',
            password:'',
            confirm_pw: '',
            requiredRule:[v => !!v || "This field is required."],
            pwRule:[v => !!v && v.length >=6 ||  "Password must be at least 6 characters long."],
            matchRule:[v => v === this.password || "Passwords must match."]
        }
    },
    methods:{
        signUp(){
        if (this.$refs.form.validate()) {

           this.msg = "success";
        }
        else{
            this.msg = "error";
        }
        
        }
    }