在数组中推送 object 时，vue ui 没有得到更新

Question

I am stucked in a problem where I have created a custom drag drop component which is working fine,

there is an array which is connected to vuex store, i have created the mutations to update or add new object inside the array that array is getting changed after drop operation but the ui is not getting changed

I am fetching that array using this.$store.getters['moduleName/functionName']

mutation.js =>

   export default {
       setNewValue(state, payload){
           state.arr.push(payload);
       }
   }

handleDrop function =>

handleDrop(event, data){
     let actionType = this.$store.getters["moduleName/getActionType"];
     let obj;
     let length = this.$store.getters["moduleName/getLengthOfArr"];
        obj = {
          id: length == 0 ? 1 : length + 1,
          name: data.name,
          isConditional: false,
          ...actionType[data.type],
          yes: [],
          no: [],
        };
        this.$store.commit("moduleName/setNewValue", obj);

action Type are some objects which i need to add based on data type provided

i guess it is due to reactivity of object properties or due to computed property which i am using in ui

computed : {
     arr(){
         return this.$store.getters['moduleName/getArray'];
     }
}

getters.js

export default {
    getArray(state){
         return state.arr;
    }
}

Thanks in advance

Answer 1

After some debugging i solved the problem as the problem was with rendering the data was getting updated and even store was getting updated

while rendering i was using the same object which was rendered previously but that made me so much confused due to vuejs' reactivity with computed property.