Computed property not updating when deep nested Vuex state changes

EDIT01: I'm using "nuxt": "^2.16.0" with "@nuxtjs/composition-api": "^0.29.2".

I've been struggling for days to fix an issue in my tab navigation. When users add or remove items (images, videos), the changes are supposed to update the DOM in other tabs, but my computed property does not reactively update when a deep nested array in Vuex state changes.

I manage state in a Vuex module using standard operations to fetch data, set state, and flag changes with mutations (stale/fresh). The problem arises when I add a getter to flag that a deep nested array — featuredItems — has changed.

Below is my Vuex store code:

TYPESCRIPTCopied
import Vue from 'vue';
import { ActionTree, MutationTree, GetterTree } from 'vuex';

import { RootState } from '~/store';
import { AsyncData } from '~/utils/needsToFetch';
import { fetchStore } from '~/utils/fetchStore';

import { featuredItems } from '~/api/featuredItems';

type State = { [key: number]: AsyncData<FeaturedItems, ListMeta> };

export const state = (): State => ({});

export const actions: ActionTree<State, RootState> = {
    fetch(actionContext, { options, userID, page }) {
        return fetchStore({
            actionContext,
            callFunc: () => {
                return featuredItems(options, userID, page);
            },
            payloadProcessor: (data: AsyncData<FeaturedItems>) => {
                let newData = [];

                // If fetching the first page, replace the state
                if (data.meta?.current_page === 1) {
                    newData = [...data.data.featuredItems];
                } else if (actionContext.state[userID]?.data?.featuredItems) {
                    // Otherwise, append new items to the existing state
                    newData.push(...actionContext.state[userID]?.data?.featuredItems, ...data.data.featuredItems);
                }

                return {
                    data: {
                        ...data.data,
                        featuredItems: newData,
                    },
                };
            },

            key: userID,
        });
    },

    // New action to mark data as stale
    markAsStale(context, userID) {
        context.commit('markAsStale', userID);
    },

    // New action to mark data as fresh
    markAsFresh(context, userID) {
        context.commit('markAsFresh', userID);
    },
};

export const getters: GetterTree<State, RootState> = {
    getFeaturedItems(state) {
        return (userID: number) => {
            return state[userID];
        };
    },
    isFeaturedItemsEmpty(state) {
        return (userID: number) => {
            const featuredItems = state[userID]?.data?.featuredItems || [];
            return featuredItems.length === 0;
        };
    },
};

export const mutations: MutationTree<State> = {
    setState(state, { key, payload }) {
        if (state[key]) {
            Object.assign(state[key], payload);
            // Replace array reference explicitly
            if (payload?.data?.featuredItems) {
                Vue.set(state[key].data, 'featuredItems', [...payload.data.featuredItems]); // Replace array
            }
        } else {
            Vue.set(state, key, { ...payload });
        }
    },

    // New mutation to mark data as stale
    markAsStale(state, key) {
        // The data might not reflect the latest state from the server or backend
        if (state[key]) {
            state[key].stale = true;
        }
    },

    // The data reflect the latest state from the BE
    markAsFresh(state, key) {
        if (state[key]) {
            state[key].stale = false;
        }
    },
};

After fetching data, the Vuex module state looks like this:

JSONCopied
{
    "status": 2,
    "stale": true,
    "data": {
        "featuredItems": [{
            "id": 11,
            "image": {
                "id": 16191745,
                "name": "pexels-rdne-6182469.jpg",
                "width": 1600,
                "height": 1067,
                "is_loved": false
            }
        }]
    },
    "meta": {
        "current_page": 1,
        "from": 1,
        "per_page": 10,
        "to": 1
    },
    "links": {
        "last": null,
        "prev": null,
        "next": null
    }
}

I'm already using Vue.set to update the array reference, yet the computed property in my child component only updates on page reload or after switching tabs. For example, this computed never re-evaluates as expected:

TYPESCRIPTCopied
const isFeaturedToggleDisabled = computed(() => {
    const items = featuredItems.value?.data?.featuredItems || [];
    console.log('Evaluating isFeaturedToggleDisabled:', items.length);
    return items.length === 0;
});

I suspect this is related to Vue 2’s limitations with deep nested reactivity as outlined in the Vue Reactivity Guide, but my multiple attempts have not resolved the issue.

EDIT02: For additional context, my Vuex module uses a legacy pattern with a helper function called fetchStore:

TYPESCRIPTCopied
export const fetchStore = async <Data, Meta = any, R = ApiResponse<Data, Meta>>({
    actionContext: { state, commit },
    callFunc,
    key,
    payloadProcessor,
}: {
    actionContext: ActionContext<AsyncData<Data, Meta> | { [key: string]: AsyncData<Data, Meta> }, RootState>;
    callFunc: () => Promise<R>;
    key?: string;
    payloadProcessor?: (...args: any[]) => {};
}) => {
    if (
        // @ts-ignore
        (key && (!state[key] || state[key].status === Status.NONE || state[key].status === Status.ERROR)) ||
        (!key && (state.status === Status.NONE || state.status === Status.ERROR))
    ) {
        // First time or error state, set status to FETCHING
        commit('setState', {
            key,
            payload: {
                status: Status.FETCHING,
                stale: false, // Mark data as not stale when fetching starts
            },
        });
    } else {
        // Already fetched, set status to REFETCHING
        commit('setState', {
            key,
            payload: {
                status: Status.REFETCHING,
                stale: false,
                error: undefined,
            },
        });
    }

    try {
        // @ts-ignore
        const { data } = await callFunc();

        if (data.success) {
            let payload = {
                status: Status.FETCHED,
                data: data.data,
                meta: data.meta,
                links: data.links,
                stale: false,
            };

            if (payloadProcessor) {
                payload = {
                    ...payload,
                    ...payloadProcessor(data),
                };
            }

            commit('setState', {
                key,
                payload,
            });

            return data;
        } else {
            const error = new Error('Data fetch failed');
            // Attach data to the error object
            (error as any).data = data;
            throw error;
        }
    } catch (error) {
        // @ts-ignore
        const message = typeof error === 'string' ? error : error.data?.message;

        commit('setState', {
            key,
            payload: {
                status: Status.ERROR,
                error: message,
                stale: true,
            },
        });

        // @ts-ignore
        return error.data;
    }
};

Any insights or suggestions to force the computed property to update immediately would be greatly appreciated.