title: Dynamic v-model as an array object with keys VueJs
body: <p>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. </p>
  
  <p><code>v-model="travellerDetails['traveller_' + traveller][details]"</code></p>
  
  <p>I want to create something like this.</p>
  
  <pre><code> travellerDetails:{ 
                      "traveller_1": {"Full Name":"Jane", "lastName":"Doe"},
                      "traveller_2": {"Full Name":"John", "lastName":"Doe"},
                  },
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="col-md-10"&gt;
     &lt;div class="form-row"&gt;
        &lt;div class="form-group col-md-6" v-for="details in bookingRequiredDetails"&gt;
           &lt;label for="required-details"&gt;{{ details }}&lt;/label&gt;
            &lt;input 
               type="text" 
               class="form-control"
               v-model="travellerDetails['traveller_' + traveller][details]" 
                                              placeholder="Required Details" 
             /&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>VUE</p>
  
  <pre><code>data () {
          return {
              travellerDetails: { },
              travellers: 3,
              bookingRequiredDetails: [ 'Full Name', 'Age', 'Gender'],
          };
      },  
  </code></pre>