JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
enter name of component (create, edit)
<input v-model="componentname" />
<component-loader :name="componentname"></component-loader>
</div>

JavaScript

Vue.component('create', Vue.extend({
        template: '<h1>CREATE HEADER</h1>'
    }));
    
     Vue.component('edit', Vue.extend({
        template: '<h1>EDIT HEADER</h1>'
    }));

Vue.component('component-loader', function (resolve) {
        var model = Vue.extend({
            props: ['name'],
            watch: {
                name: function (newValue, oldValue) {
                   //alert(newValue);
                }
            },
            render: function (createElement) {
                var self = this;
                //alert(self.name);
                var m = function (resolve) {
                    
                        resolve({
                            template: '<component is="' + self.name + '"></component>'
                        });
                    
                };

                return createElement(m);
            }
        });
        resolve(model);
    });
    
    
    var viewModel = new Vue({
    data: {
    componentname: ''
    }
    });

    viewModel.$mount('#app');