title: VueJS how to listen to event from method not from template
body: <p>I am sending an event from a child component to it's parent. I want to intercept the signal via a method in the parent. But the listening function fires always regardless of whether an event has been emitted. Note that I am using single file components and Vue-router. </p>
  
  <p>As an aside, I have found very few VueJS examples use single file components, and for a noob, transpiling from the simple Vue app in one file to multiple single file components can be confusing.</p>
  
  <p>Parent:</p>
  
  <pre><code>&lt;template&gt;
   ....html here
  &lt;/template&gt;
  &lt;script&gt;
    import Child from './Child.vue'
  
    export default {
    name: 'Parent',
    data () {
      return {
       stage: 1
      }
    },
    components: {
      Child
    },
    created: function () {
      // the following line always runs even when listen for non-existent event eg this.$on('nonsense'...)
      this.$on('child-event', this.stage = 2)
    }
    }
  </code></pre>
  
  <p>child:</p>
  
  <pre><code>&lt;template&gt;
    &lt;button v-on:click="sendEvent" type="button" class="btn btn-success"&gt;Next&lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
    name: 'Child',
    data () {
      return {
        response_status: 'accepted'
      }
    },
    methods: {
      sendEvent: function () {
        this.$emit('child-event', 'accepted')
      }
    }
  </code></pre>
  
  <p>Any idea what I am doing wrong?</p>