VueJS Dynamic Property Name Not Updating Value

I am trying to implement an associated array combined with accessing the property within the value, the key is based on the value of the campaign object.

: 'default value'}) })

var app = new Vue({
  el: '#app',

  data: {
    campaigns: [],
    configuration: {}
  },

  mounted: function() {
    this.campaigns = [{
      _id: 'abcdefg'
    }, {
      _id: 'kejwkfe'
    }, {
      _id: 'iruwiwe'
    }, {
      _id: 'reiwehb'
    }];

    this.campaigns.forEach((campaign) => {
      var id = campaign._id;
      this.$set(this.configuration, id, {'value': 'default value'})
    })
  }
})

<script src="https://vuejs.org/js/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="campaign in campaigns">
      <input type="text" v-model="configuration[campaign._id].value" /> 
           {{ configuration[campaign._id].value }}
    </li>
  </ul>
</div>

Solution 2:

Properties with reactivity must be in a Vue instance which is created by Vue constructor.

It ensures that properties are reactive and trigger view updates, i.e., they are initialed with Object.defineProperty and MutationObserver underlyingly.

So, use Vue.set to add new properties, and delete by Vue.delete.

View more info - Reactivity in Depth