How can I dynamically add inputs in VueJS wherein each dropdown is designated to a radio button group in the same row?

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<script>
    import Form from 'vform'
    import Multiselect from 'vue-multiselect'

    export default {
        components: { Multiselect },
        data: () => ({
            errors: {},
            form: new Form({
                fields: [{
                    loan_type_id: [],
                    debit: false,
                    credit: false
                }],
            }),
            arr: [],
            loan_type_options: [],
        }), 
        methods: {
            addLoan() {
                this.axios
                    .post('/api/employees', {
                        prop: JSON.stringify(this.form.fields)
                    })
                    .then(res => {
                        this.$swal({
                                title: 'Are you sure?',
                                text: 'Do you want to save this record?',
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonColor: '#3085d6',
                                cancelButtonColor: '#d33',
                                confirmButtonText: 'Yes, save it!'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    this.$router.push({ name: 'employees' })
                                    this.$swal(
                                        'Good job!',
                                        'You save the record!',
                                        'success'
                                    )
                                }
                            });
                        })
                    .catch(err => console.log(err));
            },
            getLoanTypes() {
                this.axios.get('/api/loan-types').then((res) => {
                    this.loan_type_options = res.data;
                }).catch(err => console.log(err));
            },
            onLoanTypeSelect(type) {
                var multiselect = document.getElementsByClassName('multiselect');
                this.arr.splice(multiselect.length, 0, type);   
                console.log(multiselect);
            },
            addField(object, fieldType) {
                let newObject ={};
                for (const [key, value] of Object.entries(object)) {
                    newObject[key]="";
                }
                fieldType.push(newObject);
            },
            removeField(index, fieldType) {
                fieldType.splice(index, 1);
            }
        },
        created() {
            this.getEmployeeNames();
            this.getLoanTypes();
        }
    }
</script>

<div class="flex md:w-full cstm-div-tbl-head">
                                    <label class="text-gray-600 font-semibold text-lg">Phone Number</label>
                                    <div v-for="(input, index) in form.fields" :key="`input-${index}`" class="input wrapper flex items-center">
                                        <div :class="form.errors.has('loan_type_id')?'border-2 border-red-600':''">
                                            <multiselect
                                                v-model="input.loan_type_id"
                                                :options="loan_type_options.map(loan_type => loan_type.id)" 
                                                :custom-label="opt => loan_type_options.find(loan_type => loan_type.id == opt).name"
                                                :multiple="false"
                                                :taggable="true"
                                                :tabindex="2"
                                                @select="onLoanTypeSelect"
                                            ></multiselect>
                                        </div>
                                        <ul class="sm:flex items-center w-full text-sm font-medium text-gray-900 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                                            <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
                                                <div class="flex items-center pl-3 opacity-30 cursor-not-allowed">
                                                    <input id="horizontal-list-radio-license" type="radio" value="" :name="`debit-${index}`" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500 opacity-20 cursor-not-allowed" tabindex="3" :checked="input.debit" />
                                                    <label for="horizontal-list-radio-license" class="ml-2 w-full text-sm font-medium text-gray-400 dark:text-gray-300 h-5 opacity-30 cursor-not-allowed">Debit</label>
                                                </div>
                                            </li>
                                            <li class="w-full dark:border-gray-600">
                                                <div class="flex items-center pl-3 opacity-30 cursor-not-allowed">
                                                    <input id="horizontal-list-radio-passport" type="radio" value="" :name="`credit-${index}`" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500 opacity-20 cursor-not-allowed" tabindex="4" :checked="input.credit" />
                                                    <label for="horizontal-list-radio-passport" class="ml-2 w-full text-sm font-medium text-gray-400 dark:text-gray-300 h-5 opacity-30 cursor-not-allowed">Credit</label>
                                                </div>
                                            </li>
                                        </ul>
                                        <svg @click="addField(input, form.fields)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="ml-2 cursor-pointer">
                                            <path fill="none" d="M0 0h24v24H0z" />
                                            <path fill="green" d="M11 11V7h2v4h4v2h-4v4h-2v-4H7v-2h4zm1 11C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" />
                                        </svg>
                                        <svg v-show="form.fields.length > 1" @click="removeField(index, form.fields)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="ml-2 cursor-pointer">
                                            <path fill="none" d="M0 0h24v24H0z" />
                                            <path fill="#EC4899" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z" />
                                        </svg>
                                    </div>
                                </div>