title: Vue global component not defined
body: <p>I am creating a Vue plugin that adds a custom component to the global scope like so:</p>
  
  <pre class="lang-js prettyprint-override"><code>import CustomComponent from './CustomComponent.vue';
  
  const MyPlugin = {
      install(Vue, options) {
          Vue.component('CustomComponent', CustomComponent);
      }
  }
  </code></pre>
  
  <p>and the component itself is simply:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;h1&gt;Hi from the custom component&lt;/h1&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      name: 'CustomComponent',
  
      mounted() {
          console.log('hello console');
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And then finally I import the plugin into my <code>main.js</code> file (I'm using Gridsome):</p>
  
  <pre class="lang-js prettyprint-override"><code>export default function (Vue, { router, head, isClient }) {
      Vue.use(MyPlugin);
  }
  </code></pre>
  
  <p>But now I expect that when I make a component I can extend the CustomComponent since it's in the global scope like so:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;h2&gt;Hi again&lt;/h2&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      name: 'RegularComponent',
      extends: CustomComponent
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>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.</p>