Vue.js - Watch the input value has been changed or not

Question

I am newcomer in Vue.js. Currently, I am creating a validation dialog to see user's otp is valid or not. If the value has not been changed over 5 seconds, my application disconnects automatically. However, if I use watch to monitor the value, it didn't work because the value is not changed, watch does not trigger.

How can I monitor the value is not changed within 5 seconds?

Dialog

<template>
 <div>
  <input type="text" v-model="otp">
  <b-button size="md" @click="cancel()" class="jump-to-ada-btn-cancel">
    Cancel
  </b-button>
  <b-button size="md" @click="handleJumpPage()" class="jump-to-ada-btn">
    Send
  </b-button>
 </div>
</template>

<script>

export default {
  data () {
    return {
      otp: ""
    }
  },
  computed: {
    show: {
      get: function () {
        return this.$store.state.modals.showOTPModal
      },
      set: function (val) {
        this.$store.commit("OPEN_OTP", {fieldName: "showOTPModal", fieldValue: val})
      }
    }
  },
  methods: {
    checkValueChange(newValue) {
      if(newValue === "") {
        alert("value is not changed yet")
      }
    }
  },
  watch: {
    otp: function(v) {
      console.log(v)
      let self = this
      setTimeout(function() {
        self.checkValueChange(v)
      }, 5000)
    }
  }
}
</script>

Answer 1

You do not need to watch the otp value to implement that. You only need to check if the value of the otp data property is empty in a setTimeout callback. You can add it inside handleJumpPage method (which is missing from your code above):

setTimeout(() => {
  if (this.otp === "") {
     // disconnect
  }
}, 5000)

EDIT

If you want to add a timeout that checks if otp has changed 5 seconds since component mounting you can add an extra flag as data property and check its value:

data: {
   otp: "",
   otpUpdated: false
},
watch: {
   otp() {
      otpUpdated = true
   }
},
mounted() {
  setTimeout(() => {
     if (!this.otpUpdated) {
       // disconnect
     }
   }, 5000)
}