title: How to use a Vue VM variable in a component?
body: <p>I have the following working code which displays elements of an array defined in Vue:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var vm = new Vue({
    el: "#root",
    data: {
      numbers: [1, 2, 3]
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="root"&gt;
    &lt;div v-for="number in numbers"&gt;{{number}}&lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I now want to move the inner <code>div</code> into a <code>template</code>. The code below is what I thought would be working:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component(
    'numbers', {
      template: "#templ"
    }
  )
  
  var vm = new Vue({
    el: "#root",
    data: {
      numbers: [1, 2, 3]
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="root"&gt;
    &lt;numbers&gt;&lt;/numbers&gt;
  &lt;/div&gt;
  
  &lt;template id="templ"&gt;
    &lt;div v-for="number in numbers"&gt;{{number}}&lt;/div&gt;
  &lt;/template&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This raises in the console</p>
  
  <blockquote>
    <p>[Vue warn]: Property or method "numbers" is not defined on the
    instance but referenced during render. Make sure to declare reactive
    data properties in the data option.  (found in component &lt; numbers >)</p>
  </blockquote>
  
  <p><strong>Does this mean that <code>vm.numbers</code> is not available in the component?</strong> How should I access this data for the <code>v-for</code> and mustache expression? </p>
  
  <p>I suspected that I should use <code>props</code>:</p>
  
  <pre><code>Vue.component(
      'numbers',
      {
          template: "#templ",
          props: ['numbers']
      }
  )
  </code></pre>
  
  <p>and modified accordingly the HTML:</p>
  
  <pre><code>&lt;numbers numbers="numbers"&gt;&lt;/numbers&gt;
  </code></pre>
  
  <p>but this method passes the string "numbers" instead of <code>vm.numbers</code></p>