Vue,js Watch Input Changes With Delay

<template>  <div>    <input v-model="query" />  </div></template><script>export default {  data() {    return {      query: null    }  },  watch: {    query(val) {      if (this.timer) {        clearTimeout(this.timer)      }      let sleep = 300      switch(this.query.length) {        case 1:          sleep = 1000          break        case 2:        case 3:          sleep = 700          break        case 4:        case 5:          sleep = 500      }      this.timer = setTimeout(() => {        console.log(this.query)      }, 300)    }  },}  </script>