JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <button v-on:click="addNewButton()">Add Button</button>
    <button v-on:click="addNewMessage()">Add Message</button>
  <div :is="element.component" v-for="element in elements" v-bind="element.props"></div>
</div>

JavaScript

Vue.component('my-button', {
  template: '<div><button v-on:click="test()">{{text}}</button></div>',
  props: ['text'],
  methods: {
    test() {
      alert('Test');
    }
  }
});

Vue.component('message', {
  template: '<div>{{message}}</div>',
  props: ['message']
});

new Vue({
  el: '#app',
  methods: {
    addNewButton: function() {
       this.elements.push({component: 'my-button', props: {text: 'Test'}});
    },
    addNewMessage: function() {
       this.elements.push({component: 'message', props: {message: 'Hello'}});
    }
  },
  data: {
    elements: []
  }
});