title: Vue.js - access data from root instance within component
body: <p>This seems like a fairly basic question but I can't seem to find a definitive (or even working) answer.</p>
  
  <p>I have my root instance:</p>
  
  <pre><code>var vm = new Vue({
    el: '#app',
  
    // Data
    data: {
        events: {}
    },
  
    // Methods
    methods: {
  
      fetchEvents: function(){
        this.$http.get('/api/events').success(function(theseEvents) {
        this.$set('events', theseEvents);
  
        }).error(function(error) {
  
        });
  
      }
  },
  
  ready: function(){
  
    this.fetchEvents();
  
  }
  
  });
  </code></pre>
  
  <p>And I have a separate component in which I want to list out the events that are stored in the root instance. At the moment it looks like this:</p>
  
  <pre><code>var EventsList = Vue.extend({
  
  template: '&lt;ul&gt;&lt;li v-for="event in events"&gt;&lt;h2&gt;{{ event.title }}&lt;/h2&gt;&lt;p&gt;{{ event.body }}&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;',
  
  data: function(){
    return {
      events: {}
    }
  },
  
  methods: {
  
    syncEvents: function(){
      this.$set('events', this.$parent.events);
    }
  
  },
  
  // When ready...
  ready: function(){
    this.syncEvents();
  }
  }
  </code></pre>
  
  <p>This doesn't seem to work. I have also tried <code>this.$root.events</code> to no avail. What is the correct way to go about this? Bear in mind I want to reference the data from the root, not create a copy with its own scope.</p>
  
  <p>EDIT: trying to use props, here is the list component, which is also not working:</p>
  
  <pre><code>var EventsList = Vue.extend({
  
  template: '&lt;ul&gt;&lt;li v-for="event in events"&gt;&lt;h2&gt;{{ event.title }}&lt;/h2&gt;&lt;p&gt;{{ event.body }}&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;',
  
  props: ['events']
  
  }
  </code></pre>