How to add a key value pair on existing object created via Vue Reactivity - object

Question

I already have an existing form which is dynamically created. However, I have problems with regards to adding a new set of key value pairs to the existing object. I have used the Vue Reactivity using the this.$set() method with success on the FIRST pair only.
Output
{ "traveller_1": { "gender": "c" },
"traveller_2": { "gender": "f" },
"traveller_3": { "gender": "i" }
}
Expected Output
{ "traveller_1": { "firstname": "John", "age": "23", "gender": "m" },
"traveller_2": { "firstname": "Jane", "age": "21", "gender": "f" },
"traveller_3": { "firstname": "Jade", "age": "25", "gender": "f" },
}
Fiddle https://jsfiddle.net/stda7Lwm/
View
<div class="col-md-10" id="app"> {{ travellerDetails }}
<div class="form-row" v-for="i in travellers">
<div class="form-group col-md-6" v-for="(details, index) in bookingRequiredDetails">
<label for="required-details">{{ details }}</label>
<input
type="text"
class="form-control"
#input="prop('traveller_' + i, details, $event)"
placeholder="Required Details"
/>
</div>
</div>
</div>
JS
new Vue({
el: '#app',
mounted () {
},
data () {
return {
test: { 'unit1' : { life: 30}},
travellerDetails: { },
travellers: 3,
bookingRequiredDetails: ['fullname', 'age', 'gender'],
};
},
methods: {
prop: function(obj, prop, event) {
this.$set(this.travellerDetails, obj, { [prop] : event.target.value } );
console.log(this.travellerDetails);
}
},
})

Answer 1

You're overriding all object every time you assign new value. You should change a single prop only
prop: function(obj, prop, event) {
const data = this.travellerDetails[obj] || {}
data[prop] = event.target.value
this.travellerDetails = {
...this.travellerDetails,
[obj]: {...data}
}
}