Vue - Emit To Parent - Never Use camelCase For Custom Event

A big portion of vue is communication - specifically emitting messages from child to parent components.  I'm going to layout the issue I ran into along with the resolution.  

TLDR;

When creating a custom emit event, make it kebab-case. There is a limitation when using in-dom templates that converts camelCase to lowercase. If you want to make it pretty, make it kebab case ("roles-assigned").  Do NOT make it camelCase ("rolesAssigned") as it will not be received correctly from the child.

Link to vue link where question was answered

Problem

I have created a vue component that consists of a form, and it contains all the information necessary to submit that form.  The basic idea is DRY-ing up my forms so that I never need to recreate the axios/ajax submissions again.  That works great.  However, the issue I ran into is that after the axios submission is successful on the child component, I want to refresh a table on the parent.  

Setup:

Here's how my original call looked in the .html file:

1. emit-message is a data property I am sending to the form.  By default, I am setting it to "completed" in the form...but I wanted something a little more descriptive here.

2. v-on:roleAssigned=reloadAssignedRoles.  This is telling vue which function I want to run when it receives the appropriate emitted message.

Here Is what the function looks like within my parent's "method" call:

1. For simplicity's sake, I am just trying to fire an alert.  This is where I will place my ajax request to reload the table with the updated data.

Here is what the "onSubmit" method looks like from within the form component's methods:

1. The submission is created as a "promise".  When the code reaches .then, I can't use the reference "this.messageToEmit" or "this.$emit", because "this" at that time refers to the form submission NOT the component.  Therefore, I created variables I can reference from within the ".then" call.

2. Same as #1.  There may be a better way to do this...but it works, and is understandable.

3. This is me actually emitting the message.

So What Happened?

Surprise! Nothing fired.  Checking in developer tools, I could verify that the emit message "looked" right...

But no alert message fired.

A curious thing happened when I changed the "messageToEmit" value from "roleAssigned" to "roleassigned"...THAT WORKED.

OKAY.  What about kebab-case?

THAT WORKED TOO.