title: How can I pass data to nested components from Vue instance
body: <p>I get my data via AJAX from the Vue instance, and I need to pass that data to the components. I am now learning how Vue.js works, but I find the documentation a little fragmentary...</p>
  
  <p>Here is aproximately my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;mysite&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="app"&gt;
      &lt;parent-component&gt;&lt;/parent-component&gt;
  &lt;/div&gt;
  
  &lt;template id="parent-component-template"&gt;
      &lt;div id="the-template"&gt;
          &lt;div class="the-list"&gt;
              &lt;span is="sector-item" v-for="item in sectors" :sector="item"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;button&gt;Button&lt;/button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;template id="sector-item-template"&gt;
      &lt;span&gt;
          {{ sector.name }}
      &lt;/span&gt;
  &lt;/template&gt;
  
  &lt;!-- Vue.js --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      Vue.component('parent-component', {
          template: '#parent-component-template'
      });
  
      Vue.component('sector-item', {
          props: ['sector'],
          template: '#sector-item-template'  
      });
  
      let app = new Vue({
          el: '#app',
          data: {
              sectors: [{
                  'id': 1,
                  'name': 'Industry'
              }]
          }
      });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I get the following error: </p>
  
  <pre><code>[Vue warn]: Property or method "sectors" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
  </code></pre>
  
  <p>Where do I make a mistake?</p>