Vue 3: How to Clear a Text Input When a Checkbox is Checked?

I have a form that includes a text input and a checkbox. The desired behavior is:

• If the user types into the input and then checks the checkbox, the input should be cleared (set to empty) while the checkbox remains checked.
• Conversely, if the checkbox is checked and the user starts typing, the checkbox should automatically uncheck.

Currently, Vue devtools shows that the input value is set to null when the checkbox is checked, but the change isn’t reflected in the browser—the text still appears in the input. This worked in Vue 2, so I’m wondering if something changed during the upgrade to Vue 3.

Below are the relevant components:

Form.vue

VUECopied
<template xmlns="http://www.w3.org/1999/html">
    <div>
        <InputText
            name="answer_input"
            v-model="formRef.answer_input"
            :required="!formRef.answer_input_dont_know"
        >
            <template v-slot:question>
                {{ question }}
            </template>

            <template v-slot:input>
                <div class="form-group">Or</div>
                    <input
                        type="checkbox"
                        id="answer_input_dont_know"
                        v-model="formRef.answer_input_dont_know"
                    />
                    <label for="answer_input_dont_know" class="m-0 ml-2">
                        {{ label }}
                    </label>
            </template>
        </InputText>
    </div>
</template>

<script setup>
import InputText from "../Form/InputText";
import Form from "../../Form";
import { ref, markRaw, defineExpose, watch } from "vue";

const props = defineProps({
    formData: Object
})

let formRef = markRaw(ref(new Form({
    answer_input: null,
    answer_input_dont_know: false,
}, props.formData)))

watch(formRef.value.answer_input_dont_know, () => {
    if (formRef.value.answer_input_dont_know) {
        formRef.value.answer_input = null
 }
})

defineExpose({
 formRef
})
</script>

InputText.Vue

VUECopied
<template>
    <p v-if="$slots.question" class="input__question">
      <slot name="question"></slot>
    </p>

    <div class="form-group">
      <template>
        <input
          :name="name"
          type="text"
          class="form-control"
          v-model="model"
          :required="required"
        />
      </template>
    </div>

    <slot name="input"></slot>
</template>

<script setup>
const props = defineProps({
  name: String,
  value: String,
  required: Boolean
})
const model = defineModel()
</script>

Any suggestions or fixes to solve this issue would be appreciated.