What is the efficient way to use nested dynamic component in VueJs?

Question

Right now, i am using dynamic component element in a for loop to render a page, like this:

//_.vue file
<div v-for="(component,index) in allComponentsInPage" :key="index">
      <component
        :is="component.name"
        :v-bind="component.fields"
        />
  </div>

allComponentsInPage array will have all the components in the page as object(each having two key value pair), name is the name of component and fields is the props of the component.

allComponentsInPage: [
            {
                name: 'FormComponent',
                fields: {username: 'Ashish',phone: '9090909090'}
            },
            {
                name: 'ButtonComponent',
                fields: {buttonText: 'Click here',link: 'https://www.something.com'}
            }
        ],

but now i want to create a new component which will have an an array of components(can be any) as a prop that will be rendered. So, do i have to use another for loop with dynamic component in that new component that i am creating.

//MultipleComponent.vue
<div v-for="(nestedComp,index) in new newComponentHavingMultipleComponentAsProp" :key="index">
      <component
        :is="nestedComp.name"
        :v-bind="nestedComp.fields" 
        />
  </div>

Structure of newComponentHavingMultipleComponentAsProp is same as allComponentsInPage.

Is there any other way(other than nested for loops) to implement such components. I tried with nested for loop and it works fine but does not seems to be right approach.

Thanks