JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
    <button @click="add_text_input">New Text Input Field</button>
    <my-component :showname="Hey" :type="comp.type" :name="comp.name" v-for="comp in components"></my-component>
    <pre>{{ $data | json }}</pre>
</div>

JavaScript

new Vue({
	el: "#app",
    
    data: function() {
    	return {
    		components: [{
                    name: "first_e",
                    showname: "First Name",
                    type: "text",
                    required: "false",
                    fee: "0"
                  }]
            }
    },
    
    components: {
    	'my-component': {
        	template: '<div>{{ showname }}: <input v-bind:name="name" v-bind:type="type"></div>',
            props: ['showname', 'type', 'name']
        }
    
    },

    methods: {
    	add_text_input: function() {
    		var array = {
                    name: "last_ne",
                    showname: "Last Name",
                    type: "text",
                    required: "false",
                    fee: "0"
                  };
    		this.components.push(array);
    	}
    }
})