title: Failed to resolve component when nesting multiple levels
body: <p>I'm building a survey app in Vue3 with the following structure:</p>
  <ul>
  <li>Survey
  <ul>
  <li>Section
  <ul>
  <li>Question (Text)</li>
  <li>Question (Textarea)</li>
  <li>Question (Number)</li>
  <li><em>etc...</em></li>
  <li><strong>Question (Repeater)</strong>
  <ul>
  <li>Repeater row
  <ul>
  <li>Question (Text)</li>
  <li>Question (Textarea)</li>
  <li>Question (Number)</li>
  <li><em>etc...</em></li>
  <li>Question (Repeater)
  <ul>
  <li>Repeater row
  <ul>
  <li><em>etc...</em></li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  <p>These are all components with each named exactly like I described above.</p>
  <p>Section starts looping through the first level of questions:</p>
  <pre><code>&lt;div v-for=&quot;question in questions&quot; :key=&quot;question.id&quot; v-show=&quot;question.visible&quot;&gt;
    &lt;Question
      ...
    /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Each question has a parent field (which is just a label) and calls the corresponding name from the database:</p>
  <pre><code>&lt;template&gt;
    &lt;Field :label=&quot;title&quot;&gt;
      &lt;component :is=&quot;getComponentByType(type.name)&quot;
      ...
      /&gt;
    &lt;/Field&gt;
  &lt;/template&gt;
  
  export default {
    name: 'Question',
  
    methods: {
      getFieldComponentByType(name) {
        let componentName = ''
        switch (name) {
          case 'number':
            componentName = 'InputNumber'
            break;
          case 'datetime':
            componentName = 'InputDateTime'
            break;
          case 'textarea':
            componentName = 'InputTextarea'
            break;
          case 'repeater':
            componentName = 'Repeater'
            break;
  
          ... etc
  
          default:
            componentName = 'InputText'
            break;
        }
        return componentName
      }
    }
  }
  </code></pre>
  <p>Then there can also be an repeater question which just loops through the child questions</p>
  <pre><code>&lt;div v-for=&quot;question in questions&quot; :key=&quot;question.id&quot; v-show=&quot;question.visible&quot;&gt;
    &lt;Question
      ...
    /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>For the repeater Question I receive the following error from vue:</p>
  <pre><code>[Vue warn]: Failed to resolve component: Question
  If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
    at &lt;Repeater required=false formId=125 name=393  ... &gt; 
  </code></pre>
  <p>The strange thing is when I build this structure in vue2 it works but in vue3 not. Why is vue3 having conflicts when I recall components in a nested structure? I don't want to have to duplicate my code in for example RepeaterQuestion.</p>