VueJS nested components fail in an NPM package

Question

The example below are using simplified examples.

Both components work separately, however when one is nested within the other neither render on the page.

index.js (entry point)

// Test components
import TestComponent from '../src/TestComponent.vue'
import Test2Component from '../src/Test2Component.vue'

export {
    TestComponent,
    Test2Component
}

Both TestComponent and Test2Component will render this way:

<template>
  <div class="container">
    <TestComponent></TestComponent>
    <Test2Component></Test2Component>
  </div>
</template>

<script>
import Vue from 'vue'
import { TestComponent, Test2Component } from 'myPackage'
Vue.component('TestComponent', TestComponent);
Vue.component('Test2Component', Test2Component);

However if I move the Test2Component tag into Test1Component.Vue :

<template>
    <p>This is the TestComponent</p>
    <Test2Component></Test2Component>
</template>

<script>
import Vue from 'vue'
import Test2Component from './Test2Component';
Vue.component('Test2Component', Test2Component);
console.log( Test2Component)

export default {
  name: 'TestComponent',
  components: {
    Test2Component
  }
}
</script>

Not even the TestComponent.vue parent component renders.

Answer 1

I found the solution. Do not import Vue from 'vue' and modify it, this is a duplicate of the Vue instance. This syntax seems especially restrictive to get it to work when packaging.

Instead add it as a component to export default :

<script>
import { TestComponent, Test2Component} from 'myPackage'

export default {
  components: {
    'test-component': TestComponent,
    'test2-component': Test2Component
  },
...
</script>