Vuex don't change array after get date from back

Question

I have been struggling for several days with the task of saving and changing the array in Vuex when receiving data in the back. I found similar problems but their solution did not help.

actions.js
import http from "@/assets/api.js";
export default {
  async getDate(context, payload) {
    const response = await http
      .get(`/dates/limit/?first=${payload.first}&rows=${payload.rows}`, token)
      .catch((error) => {
        const nError = new Error(
          error.response.data.detail || "Error get date"
        );
        throw nError;
      });
    context.commit("GetDate", response.date);
  },
  async UpdateDate(context, payload) {
    const date = {
      name: payload.name,
    };
    const servers = context.getters.showDates
    const index = servers.findIndex((el) => el.id === payload.id)
    const response = await http
      .put(`/date/${payload.id}`, date)
      .catch((error) => {
        const nerror = new Error(error.response.data.detail || 'Fail to Update')
        throw nerror
      })
    context.commit('UpdateDate', response.data)
    return response.statusText
  },
}

getters.js
export default{
  showDates(state){
      return state.dates
  },
}

index.js
import mutations from './mutations.js'
import actions from './actions.js'
import getters from './getters.js'

export default{
    state(){
        return{
            dates:[],
        }
    },
    mutations,
    getters,
    actions
}

mutations.js
export default {
  GetDate(state, payload) {
    state.dates= payload;
    //state.dates= [...payload];
  },
}

And in page

<script setup>
import {computed} from "vue";
import { useStore } from "vuex";
const store = useStore();
const contextDate = computed(() => {
  try {
    return store.getters.showDates;
  } catch (e: any) {
    showToast(e, notification.error);
  }
});
</script>

When chnage mutations in

    // const TaskCopy = state.agents.map(function(element, index) {
    //   console.log(element)
    //   console.log(index)
    //      if(index === payload.id){
    //        element = payload
    //      }
    //     return TaskCopy;
    //   });

Show error and update dates.

Package.json

  "dependencies": {
    "@mdi/font": "6.2.95",
    "axios": "^1.7.2",
    "roboto-fontface": "*",
    "vue": "^3.4.21",
    "vue-router": "^4.3.2",
    "vuetify": "^3.5.8",
    "vuetify-sonner": "^0.3.19",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@babel/types": "^7.24.0",
    "@types/node": "^20.11.25",
    "@vitejs/plugin-vue": "^5.0.4",
    "sass": "^1.71.1",
    "typescript": "^5.4.2",
    "unplugin-fonts": "^1.1.1",
    "unplugin-vue-components": "^0.26.0",
    "vite": "^5.1.5",
    "vite-plugin-vuetify": "^2.0.3",
    "vue-tsc": "^2.0.6"
  }

I found similar problems but their solution did not help.

ADD response from the server

{
  "id": 1,
  "name": "test",
  "id_user": 1,
  "id_dates_r": 1,
  "user": {
    "id": 1,
    "name": "TestUser",
    "descr": "2",
     "created_at": "2024-06-30T17:59:49.669Z",
    "updated_at": "2024-06-30T17:59:49.669Z"
  },
  "dates_r": {
    "id": 1,
    "name": "TestDatesRecord",
    "url": "3",
    "created_at": "2024-06-30T18:00:06.540Z",
    "updated_at": "2024-06-30T18:00:06.540Z"
  }
}

Array in the store

[
    {
        "id": 1,
        "name": "test"
        "id_user": 1,
        "id_dates_r": 2,
        "user": {
            "id": 2,
            "name": "User2",
            "descr": "1",
            "created_at": "2024-06-30T22:20:15.255Z",
            "updated_at": "2024-06-30T22:20:15.255Z"
        },
        "dates_r": {
            "id": 2,
            "name": "test2",
            "url": "2",
            "created_at": "2024-07-01T01:45:50.946Z",
            "updated_at": "2024-07-01T01:45:50.946Z"
        }
    },
    {
        "id": 2,
        "name": "test2",
        "id_user": 2,
        "id_dates_r": 1,
        "user": {
            "id": 2,
            "name": "User2",
            "descr": "1",
            "created_at": "2024-06-30T22:20:15.255Z",
            "updated_at": "2024-06-30T22:20:15.255Z"
        },
        "dates_r": {
            "id": 1,
            "name": "TestDatesRecord",
            "url": "3",
            "created_at": "2024-06-30T18:00:06.540Z",
            "updated_at": "2024-06-30T18:00:06.540Z"
        }
    },
    
]

This part is changing

  "id": 1,
  "name": "test",
  "id_user": 1,
  "id_dates_r": 1,

And this one doesn't change

        "user": {
            "id": 2,
            "name": "User2",
            "descr": "1",
            "created_at": "2024-06-30T22:20:15.255Z",
            "updated_at": "2024-06-30T22:20:15.255Z"
        },
        "dates_r": {
            "id": 1,
            "name": "TestDatesRecord",
            "url": "3",
            "created_at": "2024-06-30T18:00:06.540Z",
            "updated_at": "2024-06-30T18:00:06.540Z"
        }

The call occurs in the component

async function AddItem() {
  if (editedIndex.value > -1) {
    try {
      const message = await store.dispatch("UpdateDate", editedItem);
      Object.assign(contextDate.value[editedIndex.value], editedItem);
      showToast(NotificationTextDefault.fildUpdate, notification.success);
"ntcn");
    } catch (e: any) {
      showToast(e, notification.error);
    }
  } else {
     try {
       await store.dispatch("AddDate", editedItem);
      showToast(NotificationTextDefault.fildCreate, notification.success);
     } catch (e: any) {
       showToast(e, notification.error);
     }
  }
  close();
}