title: Vue.js: EventBus.$on received value is not propagating
body: <p>I am fairly new to vue and trying to figure out the best way to structure my event bus. I have a main layout view (<code>Main.vue</code>) inside of which I have a router view that I am passing a child's emitted info to like so:</p>
  
  <pre><code>&lt;template&gt;
  &lt;layout&gt;
  &lt;router-view :updatedlist="mainupdate" /&gt;
  &lt;/layout&gt;
  &lt;/template&gt;
  import { EventBus } from './event-bus.js'
  export default {
    data () {
      return {
        mainupdate: []
      }
    },
  mounted () {
      EventBus.$on('listupdated', item =&gt; {
        this.mainupdate = item
        console.log(item)
      })
    }
  }
  </code></pre>
  
  <p>The structure looks like: <code>Main.vue</code> contains <code>Hello.vue</code> which calls <code>axios</code> data that it feeds to child components <code>Barchart.vue</code>, <code>Piechart.vue</code>, and <code>Datatable.vue</code></p>
  
  <p>The axios call in <code>Hello.vue</code> populates a data property called <code>list</code>. I then check if <code>updatedlist</code> (passed as router prop from <code>Datatable.vue</code> to <code>Main.vue</code> when something changes) is empty, and if so set it to the value of <code>list</code></p>
  
  <p>I know that the event is being emitted and received by <code>Main.vue</code> because the <code>console.log(item)</code> shows the data. But my child components are not getting updated, even though they are using <code>updatedlist</code> as their data source. (If I reload the page, they will be updated btw, but why aren't they reactive?)</p>
  
  <p><strong>UPDATE:</strong> I thought I would cut out the top level parent <code>Main.vue</code> and just put my EventBus$on inside <code>Hello.vue</code> instead and then just change <code>list</code> when it was received. But this does two things, neither of which are great:</p>
  
  <ol>
  <li>On every page refresh, my console logs add one more log to the list and output all of them. So for example if I have made 3 changes, there will be three logs, 4 there will be 4, etc. The list grows until I restart the app. </li>
  <li>My child components are STILL not updated :(</li>
  </ol>
  
  <p><strong>UPDATE 2:</strong> UGH. I think I see why they aren't updating, the problem is with the reactivity in my chartsjs component, so I will have to resolve that there (<code>Barchart.vue</code>, <code>Piechart.vue</code>). A simple component I built myself to just read the total length DOES get updated, so that works. This still leaves the mystery of the massive number of duplicate console logs though, any ideas?</p>