Desarrollé un componente de entrada personalizado, cuando trato de usarlo en un componente principal, los atributos de entrada predeterminados max y min no funcionan. Aquí está mi elemento de entrada personalizado en el componente principal

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

Vi que max y min no funcionaban, por eso escribí una función para el evento beforeInput para evitar que el usuario ingrese un número mayor que 9 y una cadena

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

Esta función evita que los usuarios ingresen valores de cadena, pero no evita que ingresen un número mayor que 9. ¿Cómo puedo solucionar esto?

PD: estoy usando VueJS 3