Dynamic v-model as an array object with keys VueJs

Question

From the title itself I am having problems of creating a v-model with dynamic keys. It always end up with undefined all the bookingRequiredDetails when creating the dynamic v-model.

v-model="travellerDetails['traveller_' + traveller][details]"

I want to create something like this.

 travellerDetails:{ 
                    "traveller_1": {"Full Name":"Jane", "lastName":"Doe"},
                    "traveller_2": {"Full Name":"John", "lastName":"Doe"},
                },

HTML

<div class="col-md-10">
   <div class="form-row">
      <div class="form-group col-md-6" v-for="details in bookingRequiredDetails">
         <label for="required-details">{{ details }}</label>
          <input 
             type="text" 
             class="form-control"
             v-model="travellerDetails['traveller_' + traveller][details]" 
                                            placeholder="Required Details" 
           />
     </div>
   </div>

VUE

data () {
        return {
            travellerDetails: { },
            travellers: 3,
            bookingRequiredDetails: [ 'Full Name', 'Age', 'Gender'],
        };
    },