Объединить два состояния в магазине Vuex

У меня есть магазин Vuex с двумя состояниями.

• заметки (заметки, синхронизированные с сервером/БД)
• localNotes (которые не были синхронизированы с сервером/БД, при синхронизации с сервером/БД они будут перемещены в состояние «заметки»)

Я использую эти состояния, чтобы показать заметки в списке с геттером. Этот геттер объединяет два объекта и возвращает объекты слияния.

Проблема, с которой я столкнулся сейчас, заключается в том, что если я добавлю новую заметку в одно из состояний, она не будет отображаться в списке заметок, потому что получатель не выбирает «изменение». Я думаю, это происходит потому, что я возвращаю переменную вместо функции.

Это мой геттер:

const getters = {
    notesObject: (state, getters, rootState, rootGetters) => {
        let result = {};
        let mergedObject = {...state.notes, ...state.localNotes};
        Object.keys(mergedObject).forEach(key => {
            const item = mergedObject[key];
            if (rootGetters['tags/activeKey'] === null) {
                result[key] = item
            } else if (item.tag_id === rootGetters['tags/activeKey']) {
                result[key] = item
            }
        });
        return result;
    },
};

Пример объекта:

example: {
            5: {
                title: 'Testing title',
                text: 'text'
            },
            6: {
                title: 'Testing title',
                text: 'text'
            }
        }

Я надеюсь, что кто-то может помочь мне найти лучшее решение для этого. Я думал об использовании наблюдателя, но я знаю, что этого нужно избегать.

Решение состояло в том, чтобы позволить наблюдателю объединить два состояния в новое состояние. Тогда геттеру не нужно объединять два объекта