verifyOtp() {

  this.disabled = true;

  this.otpBtnClicked = false;

  this.verified = true;
},
 otp_value: '', 
 isFadeout: false,
 activationKeyFields: [
        { length: 1, value: '' },
        { length: 1, value: '' },
        { length: 1, value: '' },
        { length: 1, value: '' },
      ],

 activationKey() {
      let value = '';
      for (let field of this.activationKeyFields) {
        value += field.value;
      }
      return value;
    },
    
  handleActivationInput(e) {
      // Grab input's value
      let value = e.target.value;
      // Grab data-index value
      let index = parseInt(e.target.dataset.index);
      // Grab data-length value
      let maxlength = e.target.dataset.length;      
      
      if (this.activationKeyFields[index].value.length > maxlength) {
        e.preventDefault();
        this.activationKeyFields[index].value = value.slice(0, 1);
        try {
          this.$refs[`input-${parseInt(index + 1)}`][0].focus();
        } catch (e) {}
        return;
      }

        // Shift focus to next input field if max length reached
        if (value.length >= maxlength) {          
          if (typeof this.activationKeyFields[index + 1] == 'undefined') {
            e.preventDefault();
            return;
          }
          this.$refs[`input-${parseInt(index + 1)}`][0].focus();
          e.preventDefault();
        }
        else{
          if (typeof this.activationKeyFields[index - 1] == 'undefined') {
              e.preventDefault();
              return;
            }
            this.$refs[`input-${parseInt(index - 1)}`][0].focus();
            e.preventDefault();
        }
      },

 <input
                              class="otp-number-login"
                              type="number"
                              v-for="(key, i) in activationKeyFields"
                              :key="i"
                              :data-length="key.length"
                              :data-index="i"
                              :ref="`input-${i}`"
                              v-model="key.value"
                              @input="handleActivationInput($event)"
                              placeholder="-"
                              maxlength="1"
                            />
 <button
                            class="verify-button-otp pxy_0"
                            v-on:click="isFadeout = true"
                            :disabled="otp_value.length < 4"
                            @click="verifyOtp"
                            id="verifybtn"
                          >
                            VERIFY
                          </button>