How to render components dynamically in Vue JS?

you can create an Array like this:

components_data: [
            {
                name: 'checkbox',
                data: false
            },
            {
                name: 'text',
                data: 'Hello world!'
            }
        ]

and then loop through this array inside of the <component>:

<component
        v-for="(component,i) in components_data"
        :key="i"
        :is="component.name"
        :data="component.data"
    />

this will create 2 component [<text>, <checkbox>] dynamically and give them data via props.

when you push new data like this components_data.push({name:'image',data: {url:'cat.jpg'}}) it will render a new component as <image :data="{url:'cat.jpg'}"/>

Vue has a very simple way of generating dynamic components:

<component :is="dynamicComponentName"></component>

So I suggest you define the options as an array and set the type to be the component name:

options: [
   {
        type: 'FormInput',
        propsData: {label: 'Name'}
    },
    {
        type: 'FormButton',
        propsData: {label: 'Send'}
    }
]

Then use it in the form generator like this:

<component :is="option.type" v-for="option in options"></component>

You can also pass properties as you'd pass to ant other component, but since it's dynamic and every component has a different set of properties i would pass it as an object and each component would access the data it needs:

<component :is="option.type" v-for="option in options" :data="option.propsData"></component>

UPDATE

Since you don't have control of the components it requires a bit more manipulation:

For each component that requires text, add a text attribute in the options:

options: [
       {
            type: 'FormInput',
            propsData: {label: 'Name'}
        },
        {
            type: 'FormButton',
            text: 'Send',
            propsData: {label: 'Send'}
        }
    ]

And then just use it in the component:

<component :is="option.type" v-for="option in options">{{option.text}}</component>

For passing attributes, I think you can pass it using v-bind and then it will automatically destructure them, so if a button accepts 2 props: rounded, color the options would look like:

{
  type: 'FormButton',
  text: 'Button',
  propsData: {rounded: true, color: '#bada55'}
}

and then the component:

<component :is="option.type" v-for="option in options" v-bind="option.propsData">{{option.text}}</component>