Component prop doesn't update DOM on nested object changes

Question

I have a multidimensional object which looks like this:

obj: {
   1: {
     'a' => [ [] ],
     'b' => [ [] ]
   },
   2: {
     'x' => [ [], [] ]
   }
}

I have it in my root. I also have a watch for this object, and I am updating another object accordingly...

new Vue({
  el: '#app',
  data: {
     obj: {},
     newObj: {}
  },

  watch: {
    obj: {
      handler(obj) {

     }
    }
  }
})

I am using newObj as a prop and pass it to a component to perform for loops.

Inside handler, if I use make a change in first level key of object, the component updates the dom the DOM.

 handler(obj) {
    this.$set(this.newObj, key, {
       [innerKey]: [ [] ]
    });
 }

However if I try changing the secondary-level keys, the component doesn't update the DOM.

 handler(obj) {
    var key = 1;
    var additions = ['a', 'b', 'c']

    // First try:
    var scafold = this.newObj[key]
    scafold[additions[i]] = [ [] ];
    this.newObj[key] = scafold;

    // Second try:
    this.$set(this.newObj[key], additions[i], [ [] ]);
 }

Although, if I check vue debugger, it shows the object is updated as wanted using both ways, the DOM doesn't change.

As I said, I believe it is that it doesn't watch inner keys and respond to it. What is the proper way of overcoming this issue?

Answer 1

Did you try this.$forceUpdate(); after this.$set ?