Hola chicos, tengo el siguiente problema: quiero desmarcar los componentes personalizados de la casilla de verificación después de enviar el formulario. Establecí el modelo v en un objeto vacío después de enviarlo (cuenta.valor = {}), pero la casilla sigue marcada aunque el valor esté vacío.

Niño Checkbox.vue:

 <template> <div class="checkboxContainer"> <label :for="id">{{ text }}</label> <input :id="id" type="checkbox" @change="$emit('update:modelValue', $event.target.checked)" /> </div> </template> <script setup> import { defineProps } from 'vue' defineProps({ text: { default: '', type: String }, id: { default: '', type: String } }) </script>

Parent.vue:

 <template> <form @submit.prevent> <div class="formWrapper"> <Checkbox id="changeEmail" v-model="account.changeEmail" text="Can Change Email: " /> <Checkbox id="changeUser" v-model="account.changeUser" text="Can Change User: " /> <button type="submit" @click="createAccount()">Create</button> </div> </form> </template> <script setup> import { ref } from 'vue' import Checkbox from '@/components/helpers/Checkbox.vue' import axios from 'axios' const account = ref({}) const createAccount = () => { axios .post('/api/account-management/accounts', { can_change_own_email: account.value.changeEmail, can_change_own_user: account.value.changeUser }) .then(() => { account.value = {} }) } </script>