title: Vuejs nested dynamic component
body: <p>Knowing that i'll maybe have even more children, is there another way to do nested component in VueJS?</p>
  
  <p>I don't know in advance which component will be in the code so i use the dynamic ones but they will always have multiple children in them and not always the same amount</p>
  
  <p>Here's the only solution i found
  Is there another way to this?</p>
  
  <p>From my html:</p>
  
  <pre><code>&lt;component :is="blocksElements[0].componentId"&gt;
      &lt;component :is="blocksElements[0].child.componentId" v-if="blocksElements[0].hasChild"&gt;
          &lt;component :is="blocksElements[0].child.child.componentId" v-if="blocksElements[0].child.hasChild" v-bind="blocksElements[0].child.child.props"&gt;
              &lt;component :is="blocksElements[0].child.child.child.componentId" v-if="blocksElements[0].child.child.hasChild" v-bind="blocksElements[0].child.child.child.props"&gt;&lt;/component&gt;
          &lt;/component&gt;
      &lt;/component&gt;
  &lt;/component&gt;
  </code></pre>
  
  <p>From my js:</p>
  
  <pre><code>blocksElements: [
      {
          componentId: 'row',
          hasChild: true,
          child: {
              componentId: 'column',
              hasChild: true,
              child: {
                  componentId: 'block-image',
                  hasChild: true,
                  props: {
                      logo: true,
                      width: '120'
                  },
                  child: {
                      componentId: 'block-image',
                      hasChild: false,
                      props: {
                          logo: true,
                          width: '120'
                      }
                  }
              }
          }
      }
  ]
  </code></pre>