unity/resources/js/user/components/inputs/TextMultipleInput.vue

<template>
	<div class="form-group" :class="{'has-error': form.errors.has(input_name)}">
        <div class="mb-2">
            <label v-if="label" for="name">{{ label }}</label>
        </div>

        <b-row class="mb-2"
            v-for="(input, $index) in form[input_name]" :key="$index"
        >
            <b-col md="10">
                <input type="text"
                    class="form-control mb-1" 
                    v-model="form[input_name][$index]"
                    @keydown="form.errors.clear(input_name)"
                 >
            </b-col>
            <b-col md="2" class="text-right">
                <button type="button" class="btn btn-xs btn-danger" @click="removeField($index)">
                    <i class="fa fa-trash"></i>
                </button>
            </b-col>
        </b-row>
        <div>
            <button 
                class="btn btn-xs btn-light"
                @click="addField"
            >
                <i class="fa fa-plus"></i> Add Option
            </button>
        </div>
        <div class="text-danger text-left" v-if="form.errors.has(input_name)" v-text="form.errors.get(input_name)"></div>
    </div>
</template>


<script type="text/javascript">
	export default {
		props: ['input_name', 'form', 'placeholder', 'label', 'readonly'],
        methods: {
        	addField() {
				let vm = this;
        		vm.form[vm.input_name].push([]);
        	},
            removeField(index) {
				let vm = this;
				vm.form[vm.input_name].splice(index, 1);
            }
        },
        created() {
			let vm = this;
        }
	}
</script>