Vue 2 - different behavior on $emit when fired from click or input event

Question

In the below ( fiddle here ) the $emit fired by the click event below works as expected. The $emit fired by the input event is ( / seems to be) wired up the same way, but the parent doesn't receive the $emit.

<div id="app">
  {{ message }}
  <child-comp 
    :prop="property" 
    @emitted="receiveEmit" 
    @emittedFromInput="receiveEmitFromInput"
  ></child-comp>
 {{ otherMessage }}
</div>


Vue.component('child-comp', {
  template: '<div><button @click="sendEmit">emit</button><input type="text" @input="onInput"><p v-if="inputEventFired">The input event fired</p></div>',
  data: function() {
    return {
      inputEventFired: false
    };
  },
  methods: {
    onInput: function(e) {
      this.inputEventFired = true;
      this.$emit('emittedFromInput', 'never see this');
    },
    sendEmit: function() {
      this.$emit('emitted', 'can change from click event that emits');
    }
  }
});

new Vue({
  el: '#app',
  data: function() {
    return {
      message: 'allo',
      otherMessage: 'cannot change this from input event that emits'
    };
  },
  methods: {
    receiveEmit: function(val) {
      this.message = val;
    },
    receiveEmitFromInput: function(val) {
      alert('i do not happen')
      this.message = val;
    }
  }
});

Just to make the above more readable, the template for the child component is

<div>
  <button @click="sendEmit">emit</button>
  <input type="text" @input="onInput">
  <p v-if="inputEventFired">The input event fired</p>
</div>

Answer 1

Someone outside of SO helped me on this, and I'll post their info here. The issue here is neither the events nor the emitter, but rather (my ignorance of) the case-insensitivity of html. It seems that @someCamelCasedEvent is actually passed along to the javascript as @somecamelcasedevent. working fiddle

  this.$emit('emitted-from-input', 'never see this');


<child-comp 
  @emitted="receiveEmit" 
  @emitted-from-input="receiveEmitFromInput">
</child-comp>