<tr v-for="(object,index) in watchingArr" :key="index">
<span>{{ object.1 }}{{ object.2 }} {{ object.3 }}</span>
</tr>
I am aware that Vue3 can only detect changes in array when size changes, and only if the deep flag is set to true.
However, the deep flag cannot detect when a variables changes.
I see that in Vue2 Vue.set() was a solution, but deprecated now in Vue3.
tl;dr
this.element[newKey] = newVal
this.$store.dispatch('store/addElement',this.element) <--- Adds element to watchingArr
^ Works because we are adding a new element to the array
this.element[oldKey] = newVal
^ Does not work because we are only updating the value of the key within the array
By the way, I did check, it does update the actual array, I am sending references to the array and not copies.
SOLUTION:
This specific array was an array of Leaflet.js markers. Since my list was its own Vue3 Component, I attached a Vue3 function to the marker.
...
marker["customFunction"] = this.customFunction
...
},
customFunction(){
(change store variable 'updateList')
}
Then trigger the function on dragend
this.marker.on('dragend', function(event) {
event.target.customFunction
}
=================
On the list component, it would watch the store variable, and this.forceUpdate() to update the list