title: Is there any function in Vue to check if the DOM inside child component is updated
body: <p>I had this issue wherein, I wasn't able to select a DOM element inside the child component. As documented I was using the updated method but inside the root component.</p>
  
  <p>And it works a bit weird,</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>Vue.component('newdiv', {
    template: `
      &lt;div class="msg-wrap"&gt;
        &lt;p v-html='this.$parent.message' class="msg-p"&gt;&lt;/p&gt;
        &lt;p v-html='this.$parent.message1' class="msg-p"&gt;&lt;/p&gt;
      &lt;/div&gt;
  `,
    updated: function() {
      this.$nextTick(function() {
        $('.blue').css('color', 'blue');
      });
    }
  });
  
  new Vue({
    el: '#app',
    data: {
      message: 'Hello this is para 1',
      message1: 'Hello this is para 2',
    },
    methods: {
      ajaxCallEx() {
        // think ajax call has happened  and returns an html
        this.message = "&lt;p&gt; Hiiii This is a p1 &lt;span class='red'&gt; make me red &lt;/span&gt; &lt;/p&gt;";
        this.message1 = "&lt;p&gt; Hiiii This is a p2 &lt;span class='blue'&gt; make me blue &lt;/span&gt; &lt;/p&gt;";
      }
    },
    updated: function() {
      this.$nextTick(function() {
        // you will see that this dosen't work as the element is not present 
        $('.red').css('color', 'red');
  
      });
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue@2.5.3/dist/vue.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/jquery"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
  
    &lt;newdiv&gt;&lt;/newdiv&gt;
    &lt;button @click="ajaxCallEx"&gt;Clik Me&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here on the button click the blue para turns blue while the red remmain as it is( as it is not present in the DOM yet).</p>
  
  <p>So my first assumption was the update method of the parent component is called first and then the rendering of child element happens. Which holds true for this case. But just to prove me right i did try the following, </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>Vue.component('newdiv', {
    template: `
    &lt;div class="msg-wrap"&gt;
      &lt;p v-html='this.$parent.message' class="msg-p"&gt;&lt;/p&gt;
      &lt;p v-html='this.$parent.message1' class="msg-p"&gt;&lt;/p&gt;
    &lt;/div&gt;
  `,
    updated: function() {
      this.$nextTick(function() {
        $('.blue').css('color', 'blue');
      });
    }
  });
  
  new Vue({
    el: '#app',
    data: {
      message: 'Hello this is para 1',
      message1: 'Hello this is para 2',
      message3: 'Hello this is root para'
    },
    methods: {
      ajaxCallEx() {
        // think ajax call has happened  and returns an html
        this.message = "&lt;p&gt; Hiiii This is a p1 &lt;span class='red'&gt; make me red &lt;/span&gt; &lt;/p&gt;";
        this.message1 = "&lt;p&gt; Hiiii This is a p2 &lt;span class='blue'&gt; make me blue &lt;/span&gt; &lt;/p&gt;";
        this.message3 = "&lt;p&gt; Hiiii This is a root para &lt;span class='green'&gt; make me green&lt;/span&gt; &lt;/p&gt;";
      }
    },
    updated: function() {
      this.$nextTick(function() {
        // you will see that this dosen't work as the element is not present 
        $('.red').css('color', 'red');
  
        // this will work and it will only color the p directly within the root. 
        $('.green').css('color', 'green');
      });
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue@2.5.3/dist/vue.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/jquery"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;p v-html='this.message3'&gt;&lt;/p&gt;
    &lt;newdiv&gt;&lt;/newdiv&gt;
    &lt;button @click="ajaxCallEx"&gt;Clik Me&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As per my understanding from the last experiment, on click of the button, I expected green to turn green, blue to turn blue while red should not be working. but in this case, all the element where detected and colors were painted properly. </p>
  
  <p>I want to know the working of Updated, Why in the first case it is not able to get element in the child component and why in the second case it is able to get the element. 
  Is there a hook or event that lets root know that all its child has been rendered ?</p>