No sé si el problema es Vue, Webpack, Javascript, Node u otra cosa, pero tengo tres archivos:

components/MyComponent.vue un componente solo de plantilla

components/index.js :

 import ComponentA from './componentA'; import ComponentB from './componentB'; import MyComponent from './MyComponent'; import ComponentD from './componentD'; export { ComponentA, ComponentB, MyComponent, ComponentD };

page/SomePage.vue :

 <template> {{ someValue() }} <my-component> </my-component> </template> <script> import { ComponentA, ComponentB, MyComponent, ComponentD } from '@/assets'; export default { name: "SomePage", components: { MyComponent }, computed: { someValue() { console.log({ ComponentA, ComponentB, MyComponent, ComponentD }); return 1; } } } </script>

esperarías

• la plantilla que se representará en el navegador
• { ComponentA: (...), ComponentB: (...), MyComponent: (...), ComponentD: (...) } para ser registrado varias veces en la consola.

Lo que sucede

• no se renderiza nada en el navegador
• la línea { ComponentA: (...), ComponentB: (...), MyComponent: undefined, ComponentD: undefined } es a la consola.
• luego aparece el error Unknown custom element: <my-component> - did you register the component correctly? está registrado
• { ComponentA: (...), ComponentB: (...), MyComponent: (...), ComponentD: (...) } se registra varias veces en la consola.

Es decir, se realiza la importación, pero es demasiado tarde para que el registro tenga éxito. Omitir la reexportación

 import { ComponentA, ComponentB, ComponentD } from '@/assets'; import MyComponent from '@/assetsMyComponent;

soluciona el problema

En palabras del escritor, crítico y político inglés Edward George Bulwer-Lytton, “¿WTF?”