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.

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

var app = newVue({
  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'})
    })
  }
})

<scriptsrc="https://vuejs.org/js/vue.js"></script><divid="app"><ul><liv-for="campaign in campaigns"><inputtype="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