Hey guys I have the following problem: I want to uncheck the custom checkbox components after I submit the form. I set the v-model to an empty object after submitting (account.value = {}) but the box still stays checked even though the value is empty.

Child 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>