I developed a custom input component, when I try to use it on a parent component, default input attributes max and min do not work. Here is my custom input element on the parent component

text-field(v-model="level" type="number" max="9" min="0" label="User Level" @beforeinput="onKeyup")

I saw that max and min not working that's why I wrote a function for the beforeInput event to prevent the user enter a number bigger than 9 and a string

 onKeyup(event: InputEvent) {
  const el = event.target as HTMLInputElement
  const value = +el.value
  console.log(value)
  if (value < 0 || value > 9) event.stopImmediatePropagation()
}

This function prevents users from entering string values but does not prevent users to enter a number bigger than 9. How can I fix this?

PS: I am using VueJS 3