title: Are Vue.js and debounce (lodash/underscore) compatible?
body: <p>Following an <a href="https://stackoverflow.com/a/41232221/903011">answer</a> to my <a href="https://stackoverflow.com/questions/41230343/how-to-temporize-the-analysis-of-an-input-field">question on debouncing</a> I am wondering if vue.js and <code>lodash</code>/<code>underscore</code> are compatible for this functionality. The code in the answer</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = new Vue({
    el: '#root',
    data: {
      message: ''
    },
    methods: {
      len: _.debounce(
        function() {
          return this.message.length
        }, 
        150 // time
      )
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/underscore@1.8.3"&gt;&lt;/script&gt; &lt;!-- undescore import --&gt;
  &lt;div id="root"&gt;
    &lt;input v-model="message"&gt;Length: &lt;span&gt;{{ len() }}&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>indeed holds on the execution of my function when there is continuous input, but  when it is finally executed after some inactivity, the input for <code>function()</code> seems to be wrong.</p>
  
  <p>A practical example after starting the code above:</p>
  
  <ol>
  <li>quick sequence of characters, then no activity:</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/52JAD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/52JAD.png" alt="enter image description here"></a></p>
  
  <ol start="2">
  <li>One extra character (<code>b</code>) added, and no activity -- the length is updated (but wrongly, see below)</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/S2Dow.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S2Dow.png" alt="enter image description here"></a></p>
  
  <ol start="3">
  <li>Erase all the characters with Backspace in a quick sequence:</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/ro267.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ro267.png" alt="enter image description here"></a></p>
  
  <ol start="4">
  <li>Add one character:</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/XaqNo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XaqNo.png" alt="enter image description here"></a></p>
  
  <p>It looks like the function is ran on the last but one value of <code>message</code>. </p>
  
  <p><strong>Could it be that <code>_.debounce</code> handles the vue.js <code>data</code> before it is actually updated with  the <code>&lt;input&gt;</code> value?</strong></p>
  
  <p>Notes:</p>
  
  <ul>
  <li>tested with both <code>lodash</code> and <code>underscore</code>, with the same results (for both <code>debounce</code>and <code>throttle</code> functions).</li>
  <li>I also tested it on JSFiddle in case there would be some interference with the SO snippet</li>
  </ul>