I don’t know if the problem is Vue, Webpack, Javascript, Node, or something else, but I have three files:

components/MyComponent.vue a template-only component

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>

You’d expect

• the template to be rendered in the browser
• { ComponentA: (...), ComponentB: (...), MyComponent: (...), ComponentD: (...) } to be logged several times to the console.

What happens

• nothing is rendered in the browser
• the line { ComponentA: (...), ComponentB: (...), MyComponent: undefined, ComponentD: undefined } is to the console.
• then the error Unknown custom element: <my-component> - did you register the component correctly? is logged
• { ComponentA: (...), ComponentB: (...), MyComponent: (...), ComponentD: (...) } is logged several times to the console.

That is, the import happens — but too late for the registration to succeed. Bypassing the re-export

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

fixes the problem.

In the words of the English writer, critic, and politician Edward George Bulwer-Lytton, “WTF?”