title: Vue.js Note that mounted does not guarantee that all child components have also been mounted?
body: <p>Can someone please explain notice below from VUE doc <a href="https://v2.vuejs.org/v2/api/#mounted" rel="nofollow noreferrer">https://v2.vuejs.org/v2/api/#mounted</a> ?</p>
  <blockquote>
  <p>Note that mounted does not guarantee that all child components have also been mounted.</p>
  </blockquote>
  <p>I have tested mounting children and subchildren but both are always mounted before root/app component, so it is safe to use &quot;mounted&quot; without $nextTick to access DOM. Children and subchildren components can access DOM element from root/app template although it is mounted after children. On the other way root/app can also access DOM elements in children templates. Consider this example...</p>
  <pre><code>&lt;div id=&quot;app&quot;&gt;
    {{ message }}
    &lt;child&gt;&lt;/child&gt;
    &lt;span id=&quot;root&quot;&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
    var subchild = {
      template: `&lt;div&gt;SUBCHILD&lt;span id=&quot;subchild&quot;&gt;&lt;/span&gt;&lt;/div&gt;`,
      mounted() {
        console.log(&quot;Mounted SUBCHILD&quot;, document.getElementById('root'));
      }
    };
    
    var child = {
      template: `&lt;div&gt;CHILD&lt;span id=&quot;child&quot;&gt;&lt;/span&gt;&lt;subchild&gt;&lt;/subchild&gt;&lt;/div&gt;`,
      components : { subchild },
      mounted() {
        console.log(&quot;Mounted CHILD&quot;, document.getElementById('root'));
      }
    };
    
    var app = new Vue({
      el: '#app',
      components : { child },
      data() {
        return { message: 'APP' };
      },
      mounted() {
        console.log(&quot;Mounted APP&quot;, document.getElementById('root'), document.getElementById('child'), document.getElementById('subchild'));
      }
    
    })
  &lt;/script&gt;
  </code></pre>
  <p><a href="https://jsfiddle.net/ecobyxrn/" rel="nofollow noreferrer">https://jsfiddle.net/ecobyxrn/</a></p>
  <p>Output in console...</p>
  <blockquote>
  <p>Mounted SUBCHILD [object HTMLSpan...] [object HTMLSpan...] [object HTMLSpan...]</p>
  <p>Mounted CHILD [object HTMLSpan...] [object HTMLSpan...] [object HTMLSpan...]</p>
  <p>Mounted APP [object HTMLSpan...] [object HTMLSpan...] [object HTMLSpan...]</p>
  </blockquote>
  <p>So in my case I do not understand that VUE notice. Can someone show use case that children are mounted later then root/app? I think VUE doc is very poor and does not explain it very well. I also tried delayed mount of root/app by commenting out <code>el: '#app'</code> + adding <code>setTimeout(function() { app.$mount('#app'); }, 2000);</code> but result is the same.</p>
  <p>In addition see this image...
  <a href="https://i.stack.imgur.com/uTF2n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uTF2n.png" alt="VUE.js mounted hooks parent + child" /></a></p>
  <p>Image source: <a href="https://medium.com/@brockreece/vue-parent-and-child-lifecycle-hooks-5d6236bd561f" rel="nofollow noreferrer">https://medium.com/@brockreece/vue-parent-and-child-lifecycle-hooks-5d6236bd561f</a></p>
  <p>At source page someone in comment warns image author about mentioned VUE notice but does not explain it. It seems that everyone knows about that notice but nobody explains it.</p>