title: Vue warn: Unknown custom element: <myCompont> - did you register the component correctly?
body: <p>I'm a freshman, when i use use custom components, it gives me this error:</p>
  <blockquote>
  <p>Vue warn: Unknown custom element:  - did you register the component correctly?</p>
  </blockquote>
  <p>The <code>ModalBase</code> compontent used in the components <code>NoticeModal.vue</code> and  <code>NoticeModal</code> compontent used in the <code>productInfo.vue</code>.</p>
  <p>I'm  sure I had correctly import <code>NoticeModal</code> in <code>productInfo.vue</code> and also import <code>ModalBase.vue</code> in <code>NoticeModal.vue</code>, and all registerd.</p>
  <p>But I get the only warn: <code>Unknown custom element: &lt;modal-base&gt;</code></p>
  <p>Here is <code>ModalBase.vue</code>:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div class=&quot;modal-header&quot;&gt;
        &lt;slot name=&quot;header&quot;&gt;
          &lt;p class=&quot;title&quot;&gt;This is base&lt;/p&gt;
        &lt;/slot&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    name: &quot;ModalBase&quot;,
    data() {
      return {show: ''}
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>Here is <code>NoticeModal.vue</code>:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;noticeModal&quot;&gt;
      &lt;modal-base&gt;
        &lt;div slot=&quot;header&quot;&gt;hello&lt;/div&gt;
      &lt;/modal-base&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import {ModalBase} from '@/components/index';
      
  export default {
    name: &quot;NoticeModal&quot;,
    props: ['modalOptions'],
    components: {
      ModalBase
    },
    data() {
      return {show: ''}
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>And here is <code>productInfo.vue</code>:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;notice-modal&gt;&lt;/notice-modal&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import {NoticeModal} from '@/components/index';
      
  export default {
    name: &quot;productInfo&quot;,
    components: {
      'NoticeModal': NoticeModal
    },
    data() { }
  }
  &lt;/script&gt;
  </code></pre>
  <p>By the way this path <code>'@/components/index'</code> is right,  both <code>NoticeModal</code>and <code>ModalBase</code> had imported and registered and exported correctly in this file.</p>
  <p>And in <code>@/components/index</code>:</p>
  <pre><code>import NoticeModal from '@/components/componentsFile/NoticeModal.vue'
  import ModalBase from '@/components/componentsFile/ModalBase.vue'
      
  export {
    NoticeModal,
    ModalBase
  }
  </code></pre>