Create dynamic form in Vuejs

dynamic-form.vue

<template>
  <div>
    <v-row class="mt-n8" v-for="(stream, index) in streams" :key="index">
      <v-col cols="12" lg="5" md="5" sm="12">
        <v-select
          :items="shiftMetadataNames"
          :item-text="'name'"
          v-model="stream.shiftMetadataName"
          :name="`streams[${index}][shiftMetadataName]`"
          return-object
          label="Select Shifts">
        </v-select>
      </v-col>
      <v-col cols="12" lg="5" md="5" sm="12">
        <v-select
          :items="streamMetadataNames"
          :item-text="'name'"
          v-model="stream.streamMetadataName"
          :name="`streams[${index}][streamMetadataName]`"
          return-object
          label="Select Stream">
        </v-select>
      </v-col>
      <v-col cols="12" lg="2" md="2" sm="12">
        <v-btn color="blue darken-1"
               text @click="addOption"> <v-icon>mdi-plus</v-icon>
        </v-btn>

        <v-btn color="blue darken-1"
               v-if="streams.length > 1"
               @click="removeOption(index)"><v-icon>mdi-minus</v-icon>
        </v-btn>
      </v-col>
    </v-row>
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid';
export default {
  name: "DynamicForm",
  data: () => ({
    streams: [
      {
        name: null,
        schoolClass: null,
        shiftMetadataName: null,
        streamMetadataName: null,
        uid: uuidv4()
      }
    ],

    shiftMetadataNames: [
      {id: 1, name: "Shift One"},
      {id: 2, name: "Shift Two"}
    ],

    streamMetadataNames: [
      {id: 1, name: "Stream One"},
      {id: 2, name: "Stream Two"}
    ]
  }),

  methods: {
    addOption() {
      this.streams.push({
        name: null,
        schoolClass: null,
        shiftMetadataName: null,
        streamMetadataName: null,
        uid: uuidv4()
      })
    },

    removeOption(index) {
      this.streams.splice(index, 1);
    }
  }
}
</script>