переход списка vueJS не активируется

У меня есть сценарий в приложении Vue JS, где у меня есть список элементов, которые случайным образом меняют порядок после того, как пользователь нажимает кнопку. Я могу заставить элементы списка динамически изменять свое положение с помощью Vue.однако когда я добавляю переход списка через тег <transition-group>, изменение остается, ну, без перехода, и я не знаю, почему.

Я показываю свой список элементов с помощью атрибута v-for следующим образом:

<transition-group name="shuffle" tag="ul">
    <li class="content column" v-for="card in notecards" v-bind:key="card.u_id">
        <div v-bind:key="card.u_id" v-on:click="card.show=!card.show">
            <transition mode="out-in" name="flip">
                <span v-bind:key="card.term" v-if="card.show" class="card-pad box card card-content media">
                    <div class="media-content has-text-centered">
                        <strong>{{card.term}}</strong>
                    </div>
                </span>
                <span v-bind:key="card.def" v-else class="card card-content box media">
                    <div class="media-content has-text-centered">
                        <strong>{{card.def}}</strong>
                    </div>
                </span>
            </transition>
        </div>
    </li>
</transition-group>

Ключ-карта.u_id-это уникальный ключ для каждого элемента. Я также определил стиль css "shuffle-move" со следующим правилом:

shuffle-move{
  transition: all 1s;
}

Кроме того, я обновляю позицию с помощью метода shuffle в моем экземпляре Vue, который выглядит так:

shuffle_cards: function() {
    let entries = this.notecards.length;
    while (entries){
        let random_index = Math.floor(Math.random() * entries--);
        let intermediate = this.notecards[random_index];
        Vue.set(this.notecards, random_index, this.notecards[entries]);
        Vue.set(this.notecards, entries, intermediate);
    }
}

Я использую Vue 2.

Где же я ошибаюсь?