Проблемы с переходом группы элементов с помощью v-move (transition-group)

Question

У меня возникли проблемы с переносом списка элементов в сетке. При использовании фильтра я хочу, чтобы элементы перемещались в их новейшую позицию, но также затухали элементы, которых больше нет в отфильтрованном списке. Я видел много примеров, но сам как-то не могу понять это правильно. Даже в той части, в которой я полностью сбит с толку из-за того, как мне следует переходить в группу.

Я попытался создать ручку, чтобы продемонстрировать мою проблему https://codepen.io/jfrdfr/pen/PrqXrB со следующим кодом:

.items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  position: relative;
}
.items-enter-active,
.items-leave-active {
  transition: all 3s linear;
}
.items-leave-active {
  position: absolute;
}
.items-move {
  transition: transform 3s;
}
.items-enter,
.items-leave-to {
  opacity: 0;
}
.item {
  background: hotpink;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Я даже пытался установить положение элементов в хуке beforeLeave, но думаю, что это не сработает, потому что не все элементы расположены абсолютно, все смещается. Кто-то решил эту проблему?

И я сделал скриншот реального приложения:

Примеры, которые я посмотрел:

• https://codepen.io/udyux/pen/EwwPgr
• https://vuejsexamples.com/shuffle-deck-of-cards-transitions-with-vue/
• https://vuejs.org/v2/guide/transitions.html

Я надеюсь, что кто-то может помочь мне!

Большое спасибо, Джеффри