title: Why is a watch off by one tick in vue.js?
body: <p>I would like the height of one element to be synchronised with the height of another element. The contents of the second element change with time.</p>
  <p>An example of such code is below (and in a <a href="https://jsfiddle.net/WoJWoJ/honartnp/" rel="nofollow noreferrer">JSFiddle</a>):</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 vm = new Vue({
    el: "#root",
    data: {
      growingText: ''
    },
    watch: {
      growingText: function() {
        document.getElementById("square").style.height = document.getElementById("text").offsetHeight + 'px';
      }
  
    }
  })
  
  setInterval(
    function() {
      Vue.nextTick(function() {
        vm.growingText = vm.growingText + 'hello world ';
      })
    },
    500
  )</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div[id="root"] {
    border-style: solid;
    border-width: 2px;
  }
  div[id="square"] {
    background-color: blue;
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;
    &lt;div id="square" :style="{height: h+'px'}"&gt;
      x
    &lt;/div&gt;
    &lt;div id="text"&gt;
      {{growingText}}
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>As visible in that example, the changes of the height of the upper <code>div</code> (with the blue background) are off by one with the changes of the height of the lower <code>div</code>. The behaviour is the same whether I use <a href="https://v2.vuejs.org/v2/guide/reactivity.html" rel="nofollow noreferrer"><code>Vue.nextTick()</code></a> or not.</p>
  <p><strong>Is this by design or could I change something to have a true synchronization?</strong></p>
  <p><em>Note: I am not sure that my use of &quot;tick&quot; is correct, do not hesitate to modify the title if this is not the case.</em></p>