[Vuejs]-Deep reactivity of props in vuejs components

The issue is with the way you’re setting your data in the addComponent method.

Vue cannot pick up changes when you change an array by directly modifying it’s index, something like,

arr[0] = 10

As defined in their change detection guide for array mutations,

Vue wraps an observed array’s mutation methods so they will also
trigger view updates. The wrapped methods are:

1. push()
2. pop()
3. shift()
4. unshift()
5. splice()
6. sort()
7. reverse()

So you can change.

this.elements[data.row_index].child_components[data.column_index].child_components[data.element_index] = data.component

To,

this.elements[data.row_index].child_components[data.column_index].child_components.splice(data.element_index, 1, data.component);