How to disable text and only accept number in input vue after that move to another input

Question

hi sorry i'm still newbie in vue.

So i have input for setup pin. so the idea is the input should only accept numbers, then when filled, it will move to the next input.

Then when the delete/backspace keyboard is pressed, it will delete the input and then move to the previous input.

My coding progress has arrived like this, but there are still some bugs, such as if I want to go to the next input then I have to double click the number.

then to delete, if the cursor is in front of the input number, then I press backspace, the input is not deleted, but still returns to the previous input because I use @keyup.delete

this is the template component for PinInput.vue

<template>
  <div>
    <input
      class="m-2 border h-10 w-10 text-center form-control rounded"
      type="text"
      id="first"
      maxlength="1"
      v-model="input1"
      @keypress="NumbersOnly"
    />
    <input
      class="m-2 border h-10 w-10 text-center form-control rounded"
      type="text"
      id="second"
      maxlength="1"
      v-model="input2"
      @keypress="NumbersOnly"
      @keyup.delete="$event.target.previousElementSibling.focus()"
    />
    <input
      class="m-2 border h-10 w-10 text-center form-control rounded"
      type="text"
      id="third"
      maxlength="1"
      v-model="input3"
      @keypress="NumbersOnly"
      @keyup.delete="$event.target.previousElementSibling.focus()"
    />
    <input
      class="m-2 border h-10 w-10 text-center form-control rounded"
      type="text"
      id="fourth"
      maxlength="1"
      v-model="input4"
      @keypress="NumbersOnly"
      @keyup.delete="$event.target.previousElementSibling.focus()"
    />
  </div>
</template>

and this is my js

<script>
export default {
  name: "PinInput",
  data() {
    return {
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      result: "",
    };
  },
  
  methods: {
    NumbersOnly(evt) {
      evt = evt ? evt : window.event;
      var charCode = evt.which ? evt.which : evt.keyCode;
      if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        evt.preventDefault();
      } else {
        evt.target.nextElementSibling.focus();
        return true;
      }
    },
    
  },
  
};
</script>

your help is really meaningful for me. Thank you