title: vue.js 2 list of objects in component
body: <p>I'm very new to js frontend frameworks, and I'm trying to learn some vue.js. </p>
  
  <p>In particular I'm trying to render an array of <code>Note</code> objects that have an <code>id</code>, <code>description</code> and <code>date</code> attributes. </p>
  
  <p>I'm trying to do all of this in a component :)</p>
  
  <p>My <code>ul</code> element looks like</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;ul class="list-group"&gt;
    &lt;li
      is="note-item"
      v-for="note in notesList"
      v-bind:title="note.description"
      :key="note.id"
    &gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And my Vue code looks like:
  Some notes:</p>
  
  <p>I run on page load <code>vue.updateNoteList</code> which calls <code>vue.loadFirstNote</code>.</p>
  
  <pre class="lang-js prettyprint-override"><code>Vue.component('note-item', {
    template: '\
      &lt;li&gt;\
        {{ note.description }}\
        &lt;button v-on:click="$emit(\'remove\')"&gt;X&lt;/button&gt;\
      &lt;/li&gt;\
    ',
    props: ['notesList']
  });
  
  const vm = new Vue({
    el: '#main-content',
    data: {
      input: '',
      notesList: [{ }]
    },
  
    methods: {
      updateNoteList: function (callback) {
        const that = this;
        Note.all((notes) =&gt; {
          that.notesList = notes;
          return callback();
        });
      },
  
      loadFirstNote: function () {
        if (this.notesList.length &gt; 0) {
        this.note = this.notesList[0];
      }
    }
  });
  </code></pre>
  
  <p>I've been trying to get this working all day, and I'm getting nowhere. I'm getting the following console errors. Any help would be appreciated. </p>
  
  <pre><code>vue.common.js?e881:519 [Vue warn]: Property or method "note" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
  vue.common.js?e881:519 [Vue warn]: Error when rendering component &lt;note-item&gt;:
  vue.common.js?e881:2961 Uncaught TypeError: Cannot read property 'description' of undefined
  </code></pre>