title: Vuejs: Dynamic Recursive components (Tree Like Structure)
body: <p>I am trying to make a custom component that calls the 'list' version of itself. i keep getting an error</p>
  
  <p>Unknown custom element:  - did you register the component correctly? For recursive components, make sure to provide the "name" option.</p>
  
  <p>I have included a name option as you can see below but this doesn't solve the problem.</p>
  
  <p>Any idea what it could be?</p>
  
  <p><code>TestCompList.vue</code> &lt;-- The List component</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;p&gt;I am a list&lt;/p&gt;
  
          &lt;template v-for="block in blocks"&gt;
              &lt;test-comp :name="block.name" :header="block.name" :more="block.more" :key="block.id"&gt;&lt;/test-comp&gt;
          &lt;/template&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import TestComp from './TestComp';
  export default {
      name: "TestCompList",
      components: {
          TestComp
      },
      props: ['blocks'],
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><code>TestComp.vue</code> &lt;--- The Single component</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h3&gt;{{header}}&lt;/h3&gt;
          &lt;p&gt;{{name}}&lt;/p&gt;
          &lt;div class="mr-5" v-if="more"&gt;
              &lt;test-comp-list :blocks="more"&gt;&lt;/test-comp-list&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import TestCompList from './TestCompList';
  export default {
      name: "TestComp",
      props: ['header', 'name', 'more'],
      components: {
          TestCompList
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><code>Page.vue</code> &lt;-- The page passing the data</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
         &lt;h3&gt;Testing Recursive components&lt;/h3&gt;
  
         &lt;test-comp-list :blocks="blocks"&gt;&lt;/test-comp-list&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import TestCompList from "./TestCompList";
  export default {
    components: {
      TestCompList
    },
    data() {
      return {
        blocks: [
          {
            id: 1,
            name: "test1",
            header: "test1Header"
          },
          {
            id: 2,
            name: "test2",
            header: "test2Header"
          },
          {
            id: 3,
            name: "test3",
            header: "test3Header",
            more: [
              {
                id: 4,
                name: "test4",
                header: "test4Header"
              },
              {
                id: 5,
                name: "test5",
                header: "test5Header",
                more: [
                  {
                    id: 6,
                    name: "test6",
                    header: "test6Header"
                  },
                  {
                    id: 7,
                    name: "test7",
                    header: "test7Header"
                  }
                ]
              }
            ]
          }
        ]
      };
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Any ideas? 
  I solved a similar problem here -> <a href="https://stackoverflow.com/questions/48765656/vuejs-dynamic-recursive-components/48766844?noredirect=1#comment84539152_48766844">Vuejs: Dynamic Recursive components</a></p>
  
  <p>But can't seem to apply the solution here.
  Worst part is sometimes it seems to work and sometimes it doesn't</p>
  
  <p>Help! What could i be missing?</p>