Vue ввод кода из sms как правильно организовать?

на смс отправляется 4-х значный код, например 1234

есть 4 инпута для ввода этого кода

<div class="code-holder">
              <input
                v-for="item in 4"
                :key="item"
                v-model.number="check.code[item - 1]"
                v-focus="(item - 1) === currentIndex"
                class="code-input form-control js-code-input"
                pattern="[0-9]{1}"
                inputmode="numeric"
                maxlength="1"
                type="number"
                @paste="handlePaste"
                @input="handleInput($event,(item-1))"
                @keyup.delete="onDelete($event,(item-1))"
              >
            </div>

как правильно реализовать ввод и когда например введено 4 цифры отпарвить на сервер запрос

пока такое накидал

data () {
    return {
      currentIndex: 0,
      check: {
        code: []
      }
    }
  },
  created () {
    this.check.code = new Array(4).fill('')
  },

  methods: {
    handleInput (e, index) {
      this.currentIndex = index
      e.target.value = this.validateNumber(e.target.value)
      alert(e.target.value)
      e.target.value !== '' && ++this.currentIndex
      !this.check.code.includes('') && this.$emit('onCompleted', this.check.code.join(''))
    },
    onDelete (e, index) {
      if (e.target.value === '') {
        this.currentIndex = index - 1
      }
    },
    validateNumber (val) {
      return val.replace(/\D/g, '')
    },
    handlePaste (e) {
      e.preventDefault()
    },
}