删除嵌套数组属性值时不更新UI,仅在添加时更新

我有一个页面,其中包含从父组件传入的嵌套数组值的对象。然后,用户可以使用一系列事件和组件来管理这些订阅中的数据。目前我面临的问题是 subscriptionId 从中删除 props ,页面上的条件不变,但添加后会改变。

子组件

export default {
    props: {
        // Format of this object is:
        // { "gameId": [
        //     'subscriptionId',
        //     'subscriptionId',
        // ] }
        subscriptions: {
            type: Object,
            required: true
        }
    },
    watch: {
        subscriptions: {
            handler: function (newSubscriptions, oldSubscriptions) {
                // NEVER gets fired when `subscriptionId` deleted from array list, but is fired when a new subscription is added
                console.log('handler');
                }
            },
            deep: true
        }
    },

我怀疑这可能与我如何从对象中删除数组有关。实际上,我正在复制数组,删除有问题的索引并覆盖原始数组。我希望这种方法 watcher 不需要,但似乎没有影响。这是存在于 父组件 要更新订阅:

父组件

// Works great, don't have any issues here
handleSubscribed (subscriptionId) {
    let newSubscriptions = [subscriptionId];

    if (this.subscriptions.hasOwnProperty(this.currentGame.id)) {
        newSubscriptions = this.subscriptions[this.currentGame.id];
        newSubscriptions.push(subscriptionId);
    }

    this.$set(this.subscriptions, this.currentGame.id, newSubscriptions);
},
handleUnsubscribed (subscriptionId) {
    // if there's more than one, delete only the one we're looking for
    if (this.subscriptions.hasOwnProperty(this.currentGame.id) && this.subscriptions[this.currentGame.id].length > 1) {
        let newSubscriptions = this.subscriptions[this.currentGame.id];

        delete newSubscriptions[newChannels.indexOf(subscriptionId)];

        this.$set(this.subscriptions, this.currentGame.id, newSubscriptions);

        // shows my subscription has been removed, but GUI doesn't reflect the change
        console.log('remove-game', newSubscriptions); 
        return;
    }

    this.$delete(this.subscriptions, this.currentGame.id);
},

我希望 watch 可能是解决办法,但不是。我已经看了好几次这些反应性文档,没有找到任何理由解释为什么这行不通。

VueJS版本:2.5.7