title: Vue.js method called multiple times using $emit and $on when it should only be called once
body: <p>I'm using a bus to allow components to interact with other components via the method described in this link: <a href="https://forum.vuejs.org/t/create-event-bus-in-webpack-template/4546/2" rel="noreferrer">https://forum.vuejs.org/t/create-event-bus-in-webpack-template/4546/2</a>  .</p>
  
  <p>I have a method that is called in created hook which uses the bus to emit an event.</p>
  
  <pre><code>created () {
    this.getReviewDeck()
  },
  myMethod () {
      bus.$emit('increment')
  }
  </code></pre>
  
  <p>In another component (which is contained in the above component) I attach the event listener in the created hook as below:</p>
  
  <pre><code>created () {
    bus.$on('increment', this.incrementCount)
  },
  incrementCount () {
    console.log('count incremented')
  }
  </code></pre>
  
  <p>If I visit the component the first time everything works properly and the console will log 'count incremented' one time. However, if I leave the component and then navigate back to it the next time 'count incremented' will be logged twice, and if I leave and come back again it will now be logged three times etc.</p>
  
  <p>I can't quite figure out what exactly is going on or how best to solve this issue so that every time I go to the component the message is only logged once instead of multiple times.</p>