vuex getters 無法跟隨 state 更新

Question

最近在开发平台遇到一个让人很沮丧的状况....
简单来说就是 逻辑一样的 code 有些地方 getters 可以取得变化，有些地方又突然不行

state

类似信用卡用户的资料，以 Array<Object> 的方式存放

state: {
    userCardsArray: [
    {
        name: 'joey',
        id: '1455134212332123',
        localTime: new Date().toString(),
        type: 'VISA'
    },
    {
        name: 'lucas',
        id: '1455134212232123',
        localTime: new Date().toString(),
        type: 'MASTER CARD'
    }
    ]
}

getters

写了一个方法，用来取得 VISA 卡片的对象

getters: {
    visaCards(state) {
        return state.userCardsArray((card) => card.type == 'VISA');
    }
}

components 的部分自然会有一个 computed 用来取的这些内容，这边就不多加赘述

在更新资料时，会以 state.userCardsArray.id 为基准进行巡访，然后更新整个物件对象
方法如下

actions & mutations

actions: {
    UPDATE_USER_CARD({commit}, data){
    
        CALL_SOME_API(data).then((result) => {
            commit('updateUserCard', result.newCard);
            
            // newCard 的资料内容原则上跟 state.userCardsArray 内容相法
            // key 名称都不会改变固定是 name, id, localTime, type
            // id 保持不变
            // 其他值都有可能改变
            
        }).catch((error) => {
            //...
        });
        
    }
}


mutations: {
    updateUserCard(state, newCard) {
        state.userCardsArray.forEach((userCard, key) => {
            if(userCard.id == newCard.id){
                state.userCardsArray[key] = newCard;
            }
        });
    }
}

这个做法 getters 大多数可以抓到 state 的改变
有时候却又突然不行，完全找不到原因

目前我遇到 getters 抓不到时解法如下

mutations: {
    updateUserCard(state, newCard) {
        state.userCardsArray.forEach((userCard, key) => {
            if(userCard.id == newCard.id){
                // 直接砍掉
                state.userCardsArray.splice(key, 1);
                // 重新加一次
                state.userCardsArray.splice(key, 0, newCard)
            }
        });
    }
}

虽然可以解决问题，但对于这种错误感到很无奈，是否写法不正确
恳请高人指点迷津
感谢阅读