title: [Vue warn]: Failed to resolve directive: ref
body: <p>I'm learning about Components in Vue.js.</p>
  
  <p>The template is:</p>
  
  <pre><code>&lt;script type="text/template" id="child1"&gt;
      &lt;h3&gt;This is the child1~!&lt;/h3&gt;
  &lt;/script&gt;
  &lt;script type="text/template" id="child2"&gt;
      &lt;h3&gt;This is the child2~!&lt;/h3&gt;
  &lt;/script&gt;
  &lt;script id="parent" type="text/template"&gt;
      &lt;div&gt;
          &lt;h2&gt;This is the parent~!&lt;/h2&gt;
          &lt;child1 v-ref:cc1&gt;&lt;/child1&gt;
          &lt;child2 v-ref:cc2&gt;&lt;/child2&gt;
          &lt;button v-on:click="getChildren"&gt;get children msg&lt;/button&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>and the JS is:</p>
  
  <pre><code>    Vue.component('parent', {
          template: '#parent',
          methods: {
              getChildren:function() {
                  alert(this.$refs.cc1);
                  alert(this.$refs.cc2);
              }
          },
          components: {
              'child1': {
                  template: '#child1',
                  data: function() {
                      return {
                          msg: 'This is the child1 ~!'
                      }
                  }
              },
              'child2': {
                  template: '#child2',
                  data: function() {
                      return {
                          msg: 'This is the child2 ~!'
                      }
                  }
              }
          }
      });
  </code></pre>
  
  <p>Vue throws </p>
  
  <blockquote>
    <p>warn:vue.js:525 [Vue warn]: Failed to resolve directive: ref (found in
    component )</p>
  </blockquote>
  
  <p>Who can tell me why? Thanks!</p>