max 和 min 不适用于 VueJS 中的自定义输入组件

Question

我开发了一个自定义输入组件，当我尝试在父组件上使用它时，默认输入属性 max 和 min 不起作用。 这是我在父组件上的自定义输入元素

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

我看到最大值和最小值不起作用，这就是为什么我为 beforeInput 事件编写了 function 以防止用户输入大于 9 的数字和字符串

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

这个 function 阻止用户输入字符串值，但不阻止用户输入大于 9 的数字。我该如何解决这个问题？

PS：我正在使用 VueJS 3