bedus-creation/DynamicItem.vue

## DynamicItem.vue
<template>
    <div>
        <div v-for="row in rows" :key="row.id">
            <div class="form-group row">
                <div class="col-6">
                    <input
                        name="keys[]"
                        type="text"
                        class="form-control"
                        placeholder="Enter attribute"
                    >
                </div>
                <div class="col-6 d-flex align-items-center">
                    <input
                        v-model="row.value"
                        name="values[]"
                        type="text"
                        class="form-control"
                        placeholder="Enter values"
                    >
                    <div class="pl-2">
                        <a href="#" @click.prevent="removeItem(row.id)">*</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-center">
            <a @click.prevent="addForm" class="badge badge-secondary text-white">Add More</a>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            id: 0,
            rows: [{ id: 0, value: "" }]
        };
    },
    methods: {
        addForm: function() {
            this.id = this.id + 1;
            this.rows.push({ id: this.id, value: "" });
        },
        removeItem: function(key) {
            this.rows = this.rows.filter(e => e.id !== key);
        }
    }
};
</script>

## welcome.blade.php
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/css/app.css">
    <meta name="csrf-token" content="{{csrf_token()}}">
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="row justify-content-center">
                <form action="/post" method="post" class="bg-white p-4">
                    @csrf
                    <dynamic-form></dynamic-form>
                    <button type="submit" class="btn btn-primary float-right">Submit</button>
                </form>
            </div>
        </div>
    </div>
    <script src="/js/app.js"></script>
</body>
</html>
	<template>
	<div>
	<div v-for="row in rows" :key="row.id">
	<div class="form-group row">
	<div class="col-6">
	<input
	name="keys[]"
	type="text"
	class="form-control"
	placeholder="Enter attribute"
	>
	</div>
	<div class="col-6 d-flex align-items-center">
	<input
	v-model="row.value"
	name="values[]"
	type="text"
	class="form-control"
	placeholder="Enter values"
	>
	<div class="pl-2">
	<a href="#" @click.prevent="removeItem(row.id)">*</a>
	</div>
	</div>
	</div>
	</div>
	<div class="d-flex justify-content-center">
	<a @click.prevent="addForm" class="badge badge-secondary text-white">Add More</a>
	</div>
	</div>
	</template>

	<script>
	export default {
	data() {
	return {
	id: 0,
	rows: [{ id: 0, value: "" }]
	};
	},
	methods: {
	addForm: function() {
	this.id = this.id + 1;
	this.rows.push({ id: this.id, value: "" });
	},
	removeItem: function(key) {
	this.rows = this.rows.filter(e => e.id !== key);
	}
	}
	};
	</script>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="/css/app.css">
	<meta name="csrf-token" content="{{csrf_token()}}">
	</head>

	<body>
	<div id="app">
	<div class="container">
	<div class="row justify-content-center">
	<form action="/post" method="post" class="bg-white p-4">
	@csrf
	<dynamic-form></dynamic-form>
	<button type="submit" class="btn btn-primary float-right">Submit</button>
	</form>
	</div>
	</div>
	</div>
	<script src="/js/app.js"></script>
	</body>
	</html>