Локальное изменение массива изменяет состояние в Store

Непосредственно сам Store

import loadMore from '../assets/js/loadMore.js'
export default {
state:{
    messages: [],
    messagesMain: []
},
mutations:{
    setMessage (state, payload) {
        state.messages = payload
    },
    setMessageMain (state, payload) {
        state.messagesMain = payload
    },
    loadMessages (state, payload) {
        state.messagesMain = [...state.messagesMain, ...payload] 
    }
},
actions:{
    setMessage ({commit}, payload) {
        commit('setMessage', payload)
    },
    setMessageMain ({commit}, payload) {
        commit('setMessageMain', payload)
    },
    loadMessages ({commit, getters}) {
        let res = getters.getMessageFilter.slice()
        commit('loadMessages', loadMore(res))
    }
},
getters:{
    getMessage (state) {
        return state.messages
    },
    getMessageFilter (state) {
        return state.messages.filter(mess => {
            return !mess.main
        })
    },
    getMessageMain (state) {
        return state.messagesMain
    }
  }
}

loadMore function

В данную функцию я передаю переменную полученную из State через getters. В самой функции я данную переменную присваиваю новому массиву так что бы они были независимыми, однако при изменении новой переменной меняется значение в State

export default function loadMore (res) {
let sm = [];
sm = res.slice()
const messages = [];

if (sm.length > 2){
    for (let i = 0; i < 2; i++){
        sm[i].main = true
        debugger
        messages.push(sm[i])
    }
    return messages
}else{
    for (let i = 0; i < sm.length; i++){
        sm[i].main = true
        messages.push(sm[i])
    }
    return messages
  }
}