Are Vue.js and debounce (lodash/underscore) compatible?
<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>