'Vue 3 Composition API - Cannot create property 'value' on boolean 'false'

I'm trying to set up error handling with the Vue Composition API with the script tag.

I want to display an error depending on whether the property 'error' is true or false -

<p class="form__error-message" v-if="error">
  {{ errorMsg }}
</p>

let error = ref(false);
let errorMsg = ref("");

I have an input field in my form that should only accept non-Latin characters and thus display an error when a Latin character is entered into the input field (which it does) -

const checkAgainstLatinChars = ($event) => {
  const latinCharacters = /^[A-Za-z0-9]*$/.test($event.target.value);
  if (latinCharacters && $event.target.value !== "") {
    error.value = true;
    errorMsg.value = "Please don't type latin characters in the Chinese inputs. 🙎";
  } else if ($event.target.value === "" || !latinCharacters) {
    error = false;
    errorMsg.value = "";
  }
};

However, since I'm now using the composition API, I need to wrap the error property around a ref and then reference the property with .value... right?

This does actually kinda work because the error message does display but I get two problems along with it -

  1. Even though the error message does show, the input doesn't recognize the first keystroke so nothing visibly appears in the input field.

  2. I get the following error in my console - Uncaught TypeError: Cannot create property 'value' on boolean 'false'

All of this was working fine when using the Options API, why am I having problems now and what do I need to do to resolve them?

Thank you

*** Edit ***

Here is how the input element is being handled to give number 1 some more context -

const state = reactive({
  traditional: "",
  simplified: "",
  pinyin: "",
  english: "",
});

<input
  name="traditional"
  @input="setTraditional"
  :value="traditional"
  type="text"
  class="form__input"
  placeholder="電腦"
  required
/>

const setTraditional = ($event) => {
  state.traditional = $event.target.value;
  checkAgainstLatinChars($event);
};

Number 1 was fixed by changing name="traditional" to name="state.traditional" and number 2 was fixed by removing error = false from the setTraditional function



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source