title: Got Undefined when accessing a vue component
body: <p>I have tried accessing the Vue components in my Vue file.</p>
  
  <pre><code>&lt;template&gt;
      {{this.tables}}
  &lt;/template&gt;
  
  
  export default {
  name: 'test',
  data() {
      return {
  
      }
  },
  
  computed:{
      tables() {
          console.log(this.$children);
  
      },
  }
  </code></pre>
  
  <p>When I use <code>console.log(this.$children);</code> following is the result
  <a href="https://i.stack.imgur.com/S8yTf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S8yTf.png" alt="enter image description here"></a></p>
  
  <p>Now, I want to access and get the items of <code>display_table</code> from <code>$children</code> vuecomponent. So I use <code>console.log(this.$children[0]);</code> but this one returns <code>undefined</code>. Can someone give me some insights on what should I do to get the items in <code>display_table</code>?</p>