title: Lodash's _.debounce() not working in Vue.js
body: <p>I am trying to run a method called <code>query()</code> when a component property called <code>q</code> in Vue.js is modified. </p>
  
  <p>This fails because <code>this.query()</code> is undefined. <code>This</code> is referring to my component's instance but somehow does not contain the methods.</p>
  
  <p>Here's the relevant code part where I'm trying to watch the component property <code>q</code> and run the <code>query()</code> function: </p>
  
  <pre><code>methods: {
    async query() {
      const url = `https://example.com`;
      const results = await axios({
        url,
        method: 'GET',
      });
      this.results = results.items;
    },
    debouncedQuery: _.debounce(() =&gt; { this.query(); }, 300),
  },
  watch: {
    q() {
      this.debouncedQuery();
    },
  },
  </code></pre>
  
  <p>Error:</p>
  
  <blockquote>
    <p>TypeError: _this2.query is not a function</p>
  </blockquote>
  
  <p>If I write the <code>debounce()</code> call as below, the <code>TypeError: expected a function</code> error appears even earlier, at the page load.</p>
  
  <pre><code>debouncedQuery: _.debounce(this.query, 300),
  </code></pre>