Soy nuevo en Vue y me encontré con un problema al intentar crear un formulario usando la API de composición. Este es mi código:

 import { defineComponent, ref } from "@vue/composition-api"; export default defineComponent({ name: "Register", setup() { const form = ref(null); const submitted = ref(false); const valid = ref(false); const checkbox = ref(false); const email = ref(null); const emailRules = [ (v) => !!v || "E-mail is required", (v) => /.+@.+/.test(v) || "E-mail must be valid", ]; const submit = () => { submitted.value = true; console.log(form.value.validate()); }; return { form, checkbox, email, emailRules, valid, submitted, submit }; }, });

Y mi plantilla se ve así:

 <template> <base-login-page> <v-tabs> <v-tab>Sign up</v-tab> <v-tab>Sign in</v-tab> <v-tab-item class="section"> <v-form ref="form" v-model="valid" lazy-validation> <v-text-field v-model="email" :rules="emailRules" label="E-mail" required outlined ></v-text-field> <v-checkbox v-model="checkbox" :rules="[(v) => !!v || 'You must agree to continue!']" label="Do you agree?" required ></v-checkbox> <base-button :disabled="!valid || !submitted" color="primary" class="mr-4" @click="submit()" > Validate </base-button> </v-form> </v-tab-item> <v-tab-item>Content for Item Two</v-tab-item> </v-tabs> </base-login-page> </template> <script src="./register.component.ts" lang="ts"></script> <style src="./register.component.scss" lang="scss" scoped></style>

Aunque todo funciona, me sale este error en la consola:

[Advertencia de Vue]: evite agregar propiedades reactivas a una instancia de Vue o sus $datos raíz en el tiempo de ejecución; declárelo por adelantado en la opción de datos.

No tengo idea de lo que significa, ¿alguien podría ayudarme?