title: Vue.js global event bus
body: <p>I am trying to create a global event bus so that two sibling components can communicate with each other. I have searched around; however, I cannot find any examples of how to implement one. This is what I have so far:</p>
  
  <pre><code>var bus = new Vue();
  
  Vue.component('Increment', {
    template: "#inc",
    data: function() {
     return ({count: 0})
    },
    methods: {
      increment: function(){
        var increment = this.count++
        bus.$emit('inc', increment)
    }
   }
  })
  
  Vue.component('Display', {
    template: "#display",
    data: function(){
    return({count: 0})
    },
   created: function(){
     bus.$on('inc', function(num){
     alert(num)
     this.count = num;
    });
   }
  })
  
  
  vm = new Vue({
   el: "#example",
  })
  </code></pre>
  
  <p>I created my templates like so: <a href="http://codepen.io/p-adams/pen/PzpZBg" rel="noreferrer">http://codepen.io/p-adams/pen/PzpZBg</a></p>
  
  <p>I'd like the <code>Increment</code> component to communicate the count to the <code>Display</code> component. I am not sure what I am doing wrong in <code>bus.$on()</code>. </p>