i can't find the source of my error

this is the current code i'm working with:

<div>

    <el-card class ="login" shadow="never">

        <el-form :model="form" ref="form" :rules="rules">

            <el-form-item label="Usuario" prop="username">

                <el-input placeholder="User" v-model="form.username"></el-input>

            </el-form-item>

            <el-form-item label="Contraseña" prop="password">

                <el-input placeholder="Password" show-password v-model="form.password"></el-input>

            </el-form-item>

            <div v-if="$page.prop.errors">

                <div v-for="error in $page.prop.errors">

                    <el-alert :closable="false" type="error" title="Ha sucedido un error"> </el-alert>

                </div>

            </div>

            <div style="text-align: center">

            <el-button type="primary" @click="submit()">Login</el-button>

            </div>

        </el-form>

    </el-card>

    {{$page.prop.errors}}

</div>

export default { data() { return { form: { username: '', password: '' }, rules: { username: {required: true, message: 'The username is required', trigger:'blur'}, password: {required: true, message: 'The password is required', trigger:'blur'} } } }, methods: { submit(){ this.$refs['form'].validate((valid) => { if (valid) { this.$inertia.post('/login', { username: this.form.username, password: this.form.password }); } }); } }, }

and this is the error i'm receiving:

app.js:65152 [Vue warn]: Error in v-on handler: "ReferenceError: valid is not defined"

found in

---> at packages/button/src/button.vue at packages/form/src/form.vue at packages/card/src/main.vue at resources/js/Pages/Auth/Login.vue warn @ app.js:65152 app.js:66419 ReferenceError: valid is not defined at VueComponent.submit (0.js?id=025f6906058b51df9a39:66) at click (0.js?id=025f6906058b51df9a39:172) at invokeWithErrorHandling (app.js:66385) at VueComponent.invoker (app.js:66710) at invokeWithErrorHandling (app.js:66385) at VueComponent.Vue.$emit (app.js:68408) at VueComponent.handleClick (app.js:18087) at invokeWithErrorHandling (app.js:66385) at HTMLButtonElement.invoker (app.js:66710) at HTMLButtonElement.original._wrapper (app.js:71433)