vuejs delay watch

<template>
  <div>
    <input v-model="inputValue" />
    <p>{{ delayedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      delayedValue: ""
    };
  },
  watch: {
    inputValue: {
      handler: "updateDelayedValue",
      deep: true,
      immediate: false
    }
  },
  methods: {
    updateDelayedValue: debounce(function () {
      this.delayedValue = this.inputValue;
    }, 500)
  }
};

function debounce(func, wait) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    const later = function () {
      timeout = null;
      func.apply(context, args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}
</script>

<style>
/ Add your styles here /
</style>