VueJS: How to create v-model value inside object array

Question

I have several input fields like so:

<input type=text" v-model="InputVModel1">
<input type=text" v-model="InputVModel2">

and I want to place these v-model values inside an array of objects, like so:

array = [{id:1,value:InputVModel1},{id:2,value:InputVModel2},..]

What's the best way to achieve this? Is it to use $set in a computed value to 'push' these into the array like:

    computed: {
        computed_array: function(){ 
            object= {"id":1,"value":InputVModel1}
            this.$set(this.array, object) //push them with a for loop
            [..]
        }
    }

Or is there a more elegant way to do this?

Background: I want to use the final array for 'vuedraggable' to change the order of the objects while maintaining other important meta infos for each value.

Answer 1

new Vue({
  el: '#app',
  
  data: {
    list: [
      { id: 1, value: 'foo' },
      { id: 2, value: 'bar' },
      { id: 3, value: 'baz' } 
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <div
    v-for="(record, i) in list"
    :key="i"
  >
    {{ record.id }}
    <input v-model="record.value"/>
    {{ record.value }} <!-- To check if value key is updating in the list -->
  </div>

</div>

PS: Use list (final array) with for vue-draggable.