title: Vue.js: Run a method after a delay, but reset the delay if user input happens
body: <p>Suppose I have a form that is retrieving and displaying information from an API based on user input. As the user enters their query (for simplicity, let's say they are changing the number of results per page), the component should react and load the new data. I want to give the user a buffer zone - let's say, 2 seconds. If they enter their input, and 2 seconds passes without any new input, the component will perform an axios request. However, if more input is entered in that time, the 'timeout' will reset back to 2 seconds.</p>
  
  <p>I feel like I would use a watched property to accomplish this but am struggling with the implementation. There's the obvious <code>setTimeout</code> method, but that won't allow me to reset the timer - I'd just call it multiple times with a 2 second delay.</p>
  
  <p>How, using Vue.js, can I wait for user input, then wait for 2 seconds of inactivity (on that component), <em>then</em> perform an axios request?</p>
  
  <p>Relevant Vue template:</p>
  
  <pre><code>&lt;template&gt;
      &lt;input
          type="number"
          v-model.number="perPage" /&gt;    
  &lt;/template&gt;
  </code></pre>
  
  <p>Relevant Vue script:</p>
  
  <pre><code>&lt;script&gt;
      export default {
          data: function () {
              return {
                  perPage: 25,
              }
          },
          methods: {
              myAxiosCall() {
  
              }
          }
      }
  &lt;/script&gt;
  </code></pre>