I made a few tweaks to your Codepen project on my own version located here. You were almost there!
The key alteration lies in how the children are handled and how we incorporate a dynamic component.
Original
const App = new Vue({
el: '#app',
data: {
componentName: "componentName",
input: "input",
children: [
buttonCounter,
vueHeader
]
},
methods: {
add () {
this.children.push(this.componentName)
},
}
});
Modified
const App = new Vue({
el: '#app',
data: {
componentName: "componentName",
input: "input",
children: [
{ componentName: 'button-counter', input: 'I am a button' },
{ componentName: 'vue-header', input: 'I am a header' }
]
},
methods: {
add () {
this.children.push({
componentName: this.componentName,
input: this.input
})
},
}
});
Also, adjustments need to be made to the v-for loop within your template to accommodate the updated structure of the children array:
<template v-for="(child, index) in children">
<component :is="child.componentName" :input="child.input" :key="child.name" />
<br>
</template>
By transforming your children into an object array capable of accepting various props, you can effortlessly pass those same props into the dynamic component. In this scenario, both custom components have a prop named input as part of the object array definition.
An important thing to highlight is that when it comes to Dynamic Components in Vue.js, the is property can either receive the component itself (as per your original method) or a string representation of a pre-registered component. This distinction sets apart your initial implementation from my modified version.
Hope this helps!