Undefined prop value for a Vue component? Check the prop casing

Today I made a run of the mill global Vue component. The only thing "special" about it was the fact that it needed an id passed by prop. Looked something like this:

<my-component myProp="string value"></my-component>

The prop was defined inside the vue component, props: ['myProp'] and everything worked fine.

After inserting the component without any problems in about two dozen places, it suddenly stopped working correctly. I checked on the older pages, everything was fine. In this new instance, it was not.

Instead of receiving the prop value, I got undefined. After hopefully switching to the <my-component :myProp="'string value'"></my-component> without avail, I was left scracthing my head and trying my luck on Google.

Most of the results were about people integrating vue props incorrectly, which was not my case. I mean, it worked before, right?

Well, turns out I was embarassingly wrong and did a rookie mistake. I integrated my component initially inside .vue templates where the prop casing did not matter. However, it stopped working inside a component with an external template, included inside a php file. The fix was easy, I just had to change the case from myProp="value" to my-prop="value":

<my-component my-prop="string value"></my-component>

It's actually mentioned in the official documentation:

HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you’re using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents.

If you somehow run into this problem, make sure you have the correct casing, otherwise you'll end up like me.