title: vuejs recursive single file components
body: <blockquote>
    <p>Unknown custom element:  - did you register the component
    correctly? For recursive components, make sure to provide the "name"
    option.</p>
  </blockquote>
  
  <p>I have a Sidebar that contains a TreeList that contains TreeNodes that each contain a TreeList.</p>
  
  <p>I have read plenty about other people having problems with this. I have tried solutions such as specifying kebab case names for the components. I have read about this being a problem with namespace and I agree, because I have an example working with all components in a single file. When the components are in separate files the above error occurs when reloading my script using vue CLI. Occasionally and without explanation when saving my file the error goes away and the recursion works again.</p>
  
  <p>Then when it works correctly there is an error when clicking on child nodes.</p>
  
  <blockquote>
    <p>Cannot read property 'length' of undefined
        at simpleNormalizeChildren</p>
  </blockquote>
  
  <p>Is it something do with vue CLI serve?
  I am open to declaring these things in the global namespace except I'm not sure how that would work exactly.</p>
  
  <pre><code>import TreeList from './TreeList.vue'
  
  export default {
      name: 'tree-node',
      components: {
          'tree-list': TreeList
      },
  </code></pre>
  
  <p>...</p>
  
  <pre><code>import TreeNode from './TreeNode.vue'
  
  export default {
      name: 'tree-list',
      components: {
          'tree-node': TreeNode
      }
  </code></pre>
  
  <p>...</p>
  
  <pre><code>import TreeList from './TreeList.vue'
  import TreeNode from './TreeNode.vue'
  
  export default {
      name: 'Sidebar',
      components: {
          TreeList,
          TreeNode
      }
  </code></pre>