Vue global component not defined - vue.js

Question

I am creating a Vue plugin that adds a custom component to the global scope like so:
import CustomComponent from './CustomComponent.vue';
const MyPlugin = {
install(Vue, options) {
Vue.component('CustomComponent', CustomComponent);
}
}
and the component itself is simply:
<template>
<h1>Hi from the custom component</h1>
</template>
<script>
export default {
name: 'CustomComponent',
mounted() {
console.log('hello console');
}
}
</script>
And then finally I import the plugin into my main.js file (I'm using Gridsome):
export default function (Vue, { router, head, isClient }) {
Vue.use(MyPlugin);
}
But now I expect that when I make a component I can extend the CustomComponent since it's in the global scope like so:
<template>
<h2>Hi again</h2>
</template>
<script>
export default {
name: 'RegularComponent',
extends: CustomComponent
}
</script>
But this gives me an error of Custom Component not defined and it seems like it's because CustomComponent isn't in the global scope because if I import the CustomComponent vue file in my RegularComponent vue file it works. However, this is not the behavior I would like and I cannot figure out why CustomComponent is not just globally available.

Answer 1

CustomComponent is a javascript object, you still need to import to use it
<script>
import CustomComponent from './CustomComponent.vue'
export default {
name: 'RegularComponent',
extends: CustomComponent
}
</script>
I think when define component as global, that means you can use it in template without re-declare:
<template>
<h2>Hi again</h2>
<custom-component />
</template>