JSFiddle - React, Tailwind, and code Playground

just dynamic components made easy.

HTML

<div id="app"><div v-for="component in components">{{component}}</div></div>

<template id="dyn-one">
  <div class="component">
    <h1>Dynamic Component <span>One</span></h1>
    <p>{{text}}</p>
  </div>
</template>
<template id="dyn-two">
    <div class="component">
    <h1>Dynamic Component <span>Two</span></h1>
    <p>{{text}}</p>
  </div>
</template>

CSS

h1 > span { font-weight: 100; }

.component {
  padding: 1em;
  margin: 1em;
  background-color: white;
  border-radius: 0.3em;
}

JavaScript

Vue.component('dynOne', {
  template: '#dyn-one',
  data: () => { return { text: 'one' } }
})
Vue.component('dynTwo', {
  template: '#dyn-two',
  data: () => { return { text: 'two' } }
})

new Vue({
	el: '#app',
  data: () => {
  	return  {
    	components: ['dynOne', 'dynTwo']
    }
  },
  
  template: `<div>
  	<div :is="comp" v-for="comp in components"></div>
  </div>`
})