Two Components, one is recognized, the other triggers the `[Vue warn]: Failed to resolve component:` warning

I have two components I'm trying to use without is="vue:<<component-name>>" for reasons. For background:

• The project was generated using Vue CLI • I'm having Vue parse a large part of the DOM on the fly • Both components are in SFC .vue files, and both are defined in the entry script with Vue's defineAsyncComponent()

What I want, for convenience:

<div id="app">
  <ComponentOne></ComponentOne>
  <ComponentTwo></ComponentTwo>
</div>

I ran into an issue early on with the <ComponentOne></ComponentOne> syntax. Which is where I learned that the on-the-fly compilation may necessitate the (not-as-pretty) <div is="vue:componentone"></div> syntax.

If that was it, fine. It's not that pretty but whatever. There are tradeoffs everywhere.

But. As I built out other components, I noticed that I was able to get away with <ComponentOne></ComponentOne>. Yay! Awesome. So. I started building out the next one using the same pattern. And that's when I ran into that:

[Vue warn]: Failed to resolve component: componenttwo 
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
at <App>

I am mystified as to the difference. I went so far as to strip ComponentTwo down to the following, thinking maybe I was doing something naughty within the SFC:

<template>
    <div>ComponentTwo</div>
</template>
<script>
import { ref } from "vue";
export default {
    name: "ComponentTwo",
    setup( props ) {
        const Data = ref([]);
        return { Data }; 
    }
}
</script>

No love.

What am I missing?

UPDATE Out of desperation, I tried importing the known-working component as <ComponentTwo> and it still fails in precisely the same way.

from Recent Questions - Stack Overflow https://ift.tt/L7sbk9C
https://ift.tt/XonDdbU