I have made web apps using by Nuxt.js. I'm trying to apply for validation which excludes negative values and decimal points to all input tag(20~30) in same vue component. I think the way of injecting the validation rules to input tag on vue life-cycle mounted events goning to be success, but nothing change input tag.

<template>
・・・・・・・
<input
    type="number"
    style="width: 100%; box-sizing: border-box; text-align: right"
     v-model="item"
        />
・・・・・・・
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
@Component({})
export default class extends Vue {
   onNumbers = (val: any) => {
    return val.replace(/\D/g, '')
  }

  mounted() {
    document.querySelectorAll('input').forEach((item) => {
      item.addEventListener('input', (val) => {
        this.onNumbers(val)
      })
    })
  }
}
</script>

Does anyone advise me?