Why can errors occur when adding data to the store object?

Question

Vue.js

Good afternoon, tell me why when adding elements to the store object and then updating the component, it can cause problems with rendering elements? The data enters the component through the computed property, I use vue.set to update the array. Tell me what could be the problem or where to drip?

mutation code that updates the store object

updateMessagesByPage(state, payload) {
    let messages = [ ...state.messages[state.dialog.id], ...payload.messages ];
    Vue.set(state.messages, state.dialog.id, messages);
    Vue.set(state.messagesPagination, state.dialog.id, payload.next);
  },

computed variable code

messages: {
      get: function() {
        return this.getCurrentDialogMessages(); // геттер из стора
      },
      set: function(newMessages) {
        return newMessages;
      }
    },

scroll function

debounceScroll: _.debounce(function () {
      const self = this;
      const container = document.querySelector('.chat-container');
      let page = this.$store.state.Messenger.messagesPagination[this.id];
      let scrollTop = -container.scrollTop;
      let topOfWindow = scrollTop + container.offsetHeight >= container.scrollHeight * 0.8;

      if (topOfWindow) {
        this.fetchMessagesByPage(); // запрос на добавление "следующих обновлений"
      }
    }, 2000)

action requester

async fetchMessagesByPage({ commit, state }) {
    const res = await fetch(state.messagesPagination[state.dialog.id]); // тут строка запроса на следующие 20 сообщений
    const messages = await res.json();

    commit('updateMessagesByPage', {messages: messages.results, next: messages.next, previous: messages.previous, dialog_id: state.dialog.id});
  },

Problems