Почему предметы реактивны только в существовании в предметах? (VueJs)

Question

У меня есть несколько игр. Эти игры должны быть отсортированы по дате. Если в игры играют в один и тот же день, они должны быть отсортированы по времени.

У меня есть объект 'game', ключи которого являются датами. Каждый объект имеет массив объектов, который называется «игры». (http://joxi.ru/KAxn6yZsZZVxRm)

Пользователь может создать новую игру или обновить существующие игры. После создания или обновления все игры необходимо пересортировать.

Это мое вычисленное свойство, которое отвечает за сортировку игр

    sortGames(){

        let result = this.games;

        for(let date in result){
            result[date].games.sort(function(item1, item2){

            let item1Time = new Date(date + ' ' + item1.time);
            let item2Time = new Date(date + ' ' + item2.time);

            if(item1Time > item2Time){
                return 1;
            }else if(item2Time > item1Time){
                return -1;
            }

            return 0;
            });

        }

        let ordered = {};
        Object.keys(result).sort(function (date1, date2) {
            let dateFirst = new Date(date1);
            let dateSecond = new Date(date2);

            if(dateFirst > dateSecond){
                return 1;
            }else if(dateSecond > dateFirst){
                return -1;
            }

            return 0;
        }).forEach(function(date){
            ordered[date] = result[date];
        });

        return ordered;
    }

}

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

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

    addGame(game){
        let date = new Date(game.datetime);
        let momentObject = moment(date);


        let fullDate = momentObject.format('YYYY-MM-DD');
        game.time = momentObject.format('HH:mm');

        if(!!this.games[fullDate]){
            this.games[fullDate].games.push(game);
        }else{

            let newDayObject = {
                day: date.getDate() +' '+ this.getMonthRussianName(date.getMonth()),
                games: [game]
            };

            Vue.set(this.games, fullDate, newDayObject);
        }
    },

Есть некоторые странные моменты.

Сначала я потерял реактивность. Например, если я создаю новый элемент и сразу пытаюсь обновить его, ничего не произойдет, но в vue devtools я вижу, как он может (http://joxi.ru/eAOLgkZS99vBer)

Во-вторых, если я обновлю старый элемент с новой датой, которой не было в объекте до того, как этот элемент будет обновляться хорошо без потери реактивности

(http://joxi.ru/J2b6Ov0F00q982) (http://joxi.ru/krDLndPSKKGaGr)

Когда я говорю «старый элемент», я имею в виду объект, который дал бэкэнд сразу после загрузки страницы.

Есть код обновления

    updateGame(game, oldDate){

        // сначала нужно удалить элемент из старого массива
        let oldIndex = this.games[oldDate].games.findIndex(function(currentGame){
            if(currentGame.id === game.id){
                return true;
            }
        });
        Vue.delete(this.games[oldDate].games, oldIndex);

        if(this.games[oldDate].games.length === 0){
            Vue.delete(this.games, oldDate);
        }


        this.addGame(game);
    },

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

(http://joxi.ru/YmEKXL4CwwGQNA) (http://joxi.ru/J2b6Ov0F00qp82)

Извините за большой текст, но я думаю, что все эти проблемы связаны с тем, что я не совсем понимаю, как создавать реактивные свойства