Vue passing data to child component
<p>I have an issue where I'm trying to pass an object 'through' one component, which is the overall layout, to child components which sit inside it. I've made a simplified example where I basically have a <code>&lt;ul&gt;&lt;/ul&gt;</code> template and an <code>&lt;li&gt;&lt;/li&gt;</code> template.</p>

<p>I seem to be losing the reference for each one by the time they are created. When I create them, I get the error:</p>

<pre><code>vue.js:1023 [Vue warn]: Error when evaluating expression "model.id": 
   TypeError: Cannot read property 'id' of undefined (found in component:
   &lt;demo-list-item&gt;)
</code></pre>

<p>What am I doing wrong? </p>

<p>I think I just have a fundamental missing from my knowledge of Vue... I'm really, really new to it and am learning from their website – so this could be a really obvious / silly mistake.</p>

<p>HTML:</p>

<pre><code>&lt;div id="app"&gt;
    &lt;demo-list&gt;&lt;/demo-list&gt;
    &lt;script id="demo-list-template" type="text/x-template"&gt;
        &lt;ul&gt;
            &lt;demo-list-item v-for="item in items"&gt;&lt;/demo-list-item&gt;
        &lt;/ul&gt;
    &lt;/script&gt;
    &lt;script id="demo-list-item-template" type="text/x-template"&gt;
            &lt;li data-id="{{model.id}}"&gt;{{ model.name }}&lt;/li&gt;
    &lt;/script&gt;
&lt;/div&gt;
</code></pre>

<p>JavaScript:</p>

<pre><code>// define
var DemoList = Vue.extend({
    template: '#demo-list-template',
    data : function(){
        return {
            'items' : [
                {
                    'id' : 1,
                    'name' : 'this'
                },
                {
                    'id' : 2,
                    'name' : 'that'
                },
                {
                    'id' : 3,
                    'name' : 'something'
                },
                {
                    'id' : 4,
                    'name' : 'nothing'
                }
            ]
      }
    }
});

// List Item
var DemoListItem = Vue.extend({
    template : '#demo-list-item-template'
});

// register
Vue.component('demo-list', DemoList);
Vue.component('demo-list-item', DemoListItem);

// create a root instance
var Vue = new Vue({
  el: '#app',
});
</code></pre>

<p>Demo:
<a href="http://codepen.io/EightArmsHQ/pen/vXYWgz" rel="nofollow">http://codepen.io/EightArmsHQ/pen/vXYWgz</a></p>