Component overwrites sibling text unless wrapped in containing element

When using the vue icon component in an element with sibling text, it is removing the text on render:

Old method using the JS library (works with icon and sibling text visible):

<div>
    <i class="fas fa-bolt"></i> Some sibling text
</div>

New method using Vue component (not working with ONLY icon visible… the sibling text is removed from the dom):

<div>
    <font-awesome-icon icon="bolt" /> Some sibling text
</div>

If I wrap the component in a span, it works as intended:

<div>
    <span><font-awesome-icon icon="bolt" /></span> Some sibling text
</div>

[OriginalEXE]

Ok I figured it out. You can’t use self closing tags for your Vue components when you use in-line templates. You can only do it when using .vue single file components.

[OriginalEXE]

It seems to be related to the usage of the self-closing tags: https://codesandbox.io/s/pwj7zl7340