Passing props dynamically to dynamic component in VueJS

To pass props dynamically, you can add the v-bind directive to your dynamic component and pass an object containing your prop names and values:

So your dynamic component would look like this:

<component :is="currentComponent" v-bind="currentProperties"></component>

And in your Vue instance, currentProperties can change based on the current component:

data: function () {  return {    currentComponent: 'myComponent',  }},computed: {  currentProperties: function() {    if (this.currentComponent === 'myComponent') {      return { foo: 'bar' }    }  }}   

So now, when the currentComponent is myComponent, it will have a foo property equal to 'bar'. And when it isn't, no properties will be passed.

You can also do without computed property and inline the object.

<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

Shown in the docs on V-Bind - https://vuejs.org/v2/api/#v-bind

You could build it like...

comp: { component: 'ComponentName', props: { square: true, outlined: true, dense: true }, model: 'form.bar' }     

<component :is="comp.component" v-bind="{...comp.props}" v-model="comp.model"/>