Inside my parent component, I have a child component:

<upsetting-moment-step
    :this-step-number="1"
    :current-step-number="currentStepNumber"
    @showNextStep="showNextStep"
></upsetting-moment-step>

My parent component also has this method:

methods: {
    showNextStep() {
        this.currentStepNumber++;
    }
},

I call this event from a button in my child component:

<button type="button" class="btn btn-lg btn-primary" @click="showNextStep">Continue</button>

Here is the child component method:

methods: {
    showNextStep() {
        this.$emit('showNextStep');
    }
},

Now this works great, but I'm confused, because it stops working when I use @show-next-step instead of @showNextStep in the child component tag.

According to the docs, it SHOULD work, and it is also the recommended way of doing it. However, it simply does not work.

What's funny, is if I change it to snake case, it works if I use this.$emit('show-next-step');. However, this is confusing me, because I'm able to pass my props via snake case, and use them in my component via camel case.

Am I doing something wrong?