Использование группы перехода и класса v-move

Question

Поэтому я пытаюсь перевести массив карт Vuetify в (и из) отображения.

Чего я хочу добиться: когда я добавляю карточку, я хочу, чтобы карточка скользила снизу, а когда я удаляю карточку, я хочу, чтобы карточка скользила вправо (и исчезала), и после этого оставляли оставшиеся карточки в список, чтобы скользить вверх и заполнить пробел.

Я пытаюсь выполнить последнюю часть, используя класс v-move. Без класса v-move и сдвиг вверх, и сдвиг вправо работают нормально. После использования класса v-move слайд-ап перестает работать, и анимация оставшихся карт также не работает. Любая подсказка?

Код ниже:

Шаблон:

<transition-group name="slide">
    <device-card
        v-if="devices.length > 0"
        v-for="device in devices"
        :key="device.id"
        :device="device"
        @deviceRemoved="removeDevice($event)"></device-card>
</transition-group>

CSS:

.slide-enter {
    transform: translateY(500px);
}

.slide-enter-active {
    transition: transform 0.7s ease-out;
}

.slide-enter-to {
    transform: translateY(0px);
}

.slide-leave {
    transform: translateX(0px);
}

.slide-leave-active {
    transition: transform 0.7s ease-out;
    position: absolute;
}

.slide-leave-to {
    transform: translateX(2000px);
}

.slide-move {
    transition: transform 5s;
}