title: Vue.js this.$nextTick() doesn't seems to wait for dom rendering
body: <p>I'm facing a problem using nextTick() in Vue.</p>
  
  <p>Here is the template code :
  In the template :</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div v-if="editing"&gt;
        &lt;span ref="theInput"
              contenteditable="true"&gt;{{ someValue }}&lt;/span&gt;
      &lt;/div&gt;
      &lt;div v-else&gt;
        &lt;span&gt;{{ someValue }}&lt;/span&gt;
      &lt;/div&gt;
      ...
  &lt;/template&gt;
  </code></pre>
  
  <p>And the script code :</p>
  
  <pre class="lang-js prettyprint-override"><code>data() {
    editing: false
  }
  ...
  methods: {
    toggle() {
      this.editing = ! this.editing;
      if (this.editing) {
        this.$refs.theInput.focus();
      }
    }
  }
  </code></pre>
  
  <p>Of course <code>this.$refs.theInput</code> is not rendered yet when I ask to focus in it. </p>
  
  <p>So far, the only way I've figured out how to make it work is to add a timeout, which is a very bad solution :</p>
  
  <pre class="lang-js prettyprint-override"><code>methods: {
    toggle() {
      this.editing = ! this.editing;
      if (this.editing) {
        setTimeout(() =&gt; this.$refs.theInput.focus(), 100)
      }
    }
  }
  </code></pre>
  
  <p>Trying to make it more clean I tried this, but the result is the same :</p>
  
  <pre class="lang-js prettyprint-override"><code>methods: {
    toggle() {
      this.editing = ! this.editing;
      if (this.editing) {
        this.$nextTick(() =&gt; {
          this.$refs.theInput.focus();
        });
      }
    }
  }
  </code></pre>
  
  <p>Shouldn't nextTick wait for the dom to render before trying to focus on theInput ?
  Thanks for your help.</p>