title: Vue2 & $refs & Cannot read property 'msg' of undefined
body: <p>I use <code>$refs</code> to bind the child component but Can not get the value of child component from parent component thorough <code>$ref.refname.msg</code>. (I have tried <code>$children</code> which could work).</p>
  
  <ol>
  <li><p>msg of child component has been defined.</p></li>
  <li><p>msg info could be got through <code>parent.$chidren.msg</code>.</p></li>
  </ol>
  
  <p>But the error showed that: </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'msg' of undefined.</p>
  </blockquote>
  
  <p>Here's HTML code. 
           </p>
  
  <pre><code>     &lt;template id="parent-component" ref='parent'&gt;
        &lt;div&gt;
          &lt;child-component1&gt;&lt;/child-component1&gt;
          &lt;child-component2&gt;&lt;/child-component2&gt;
          &lt;button v-on:click="showChildData"&gt;Show child component data&lt;/button&gt;
          &lt;/div&gt;
        &lt;/template&gt;
  
        &lt;template id="child-component1" ref="cc1"&gt;
          &lt;div&gt;
            &lt;span&gt; This is child component 1.&lt;/span&gt;
            &lt;button v-on:click="showParentData"&gt;Show parent component data&lt;/button&gt;
          &lt;/div&gt;
        &lt;/template&gt;
  
        &lt;template id="child-component2" ref="cc2"&gt;
          &lt;div&gt;
            &lt;span&gt; This is child component 2.&lt;/span&gt;
            &lt;button v-on:click="showParentData"&gt;Show parent component data&lt;/button&gt;
          &lt;/div&gt;
        &lt;/template&gt;
  
        &lt;div id="e15"&gt;
          &lt;parent-component&gt;&lt;/parent-component&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>Here's JavaScript:</p>
  
  <pre><code>    Vue.component('parent-component',{
          template: '#parent-component',
          components: {
              'child-component1': {
                  template: '#child-component1',
                  data: function(){
                      return {
                          msg: 'This is data of cc1'
                      };
                  },
                  methods: {
                      showParentData: function(){
                          alert(this.$parent.msg);
                      }
                  }
              },
              'child-component2': {
                  template: '#child-component2',
                  data: function() {
                      return {
                          msg: 'This is data of cc2',
                          num: 12
                      };
                  },
                  methods: {
                      showParentData: function(){
                          alert(this.$parent.msg);
                      }
                  }
              }
          },
          data: function() {
              return {
                  msg: 'This is data of parent.'
              };
          },
          methods: {
              showChildData: function(){
  
  
                  for(var i=0;i&lt;this.$children.length;i++){
                      alert(this.$children[i].msg);
                      // console.log(this.$children[i]);
                  }
                  //!!!!This line doesn't work!!!
                  alert(this.$refs.cc2.msg);
  
              }
          }
      });
  
  
      var e15 = new Vue({
          el: '#e15'
      });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/j2xmyL4q/" rel="nofollow noreferrer">Code in JSFaddle</a></p>