title: Vue.js 2 components parent child item not defined
body: <p>I am new to vue and I am getting the error <code>referenceError: items is not defined</code>. Can anyone see why this happens or give me some pointers?</p>
  
  <p>I think it has something to do with the <code>items</code> not being set on first look at the template.</p>
  
  <p><strong>My code</strong>:</p>
  
  <pre><code>&lt;div id="root"&gt;
      &lt;task-list&gt;&lt;/task-list&gt;
      &lt;template id="my-parent"&gt;
          &lt;table&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;id&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr is="task" v-for="item in items" :item="item"&gt;&lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/template&gt;
  
      &lt;template id="my-child"&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;{{ item.name }}&lt;/td&gt;
              &lt;td&gt;{{ item.id }}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/template&gt;
  
  &lt;/div&gt;
  &lt;script&gt;
  
  
  
  Vue.component('task-list', {
   template: '#my-parent',
   data: function() {
          return {
              items: []
          }
    },
    methods: {
      getMyData: function(val) {
  
          var _this = this;
          $.ajax({
              url: 'vuejson.php',
              method: 'GET',
              success: function (data) {
                  console.log(data);
                  _this.items = data;
              },
              error: function (error) {
                  alert(JSON.stringify(error));
              }  
          })
  
       }
    },
    mounted: function () {
         this.getMyData("0");
      }
  });
  
  Vue.component('task', {
  
    template: '#my-child',
    props: ['item'],
  
      data: function() {
          return {
              item: {}
          }
      }
  });
  new Vue({
    el: "#root",
  
  });
  
  &lt;/script&gt;
  </code></pre>