How to use a Vue VM variable in a component?
<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>