Vue lodash.shuffle for a list?

Question

Vue.js

Codesandbox ShuffleList.vue
There is a list with animation lodash.shuffle:

<template>
  <div id="filter">
    <button v-on:click="shuffle">Перемешать</button>

    <transition-group 
      name="list" 
      mode="out-in" 
      tag="ul" 
      class="catalog-list">

      <li 
        :key="index" 
        v-for="(item, index) in items">

        <h3>{{ item.name }}</h3>
        <span>{{ item.price }}</span>

      </li>

    </transition-group>

  </div>
</template>

<script>
import _shuffle from "lodash.shuffle";

export default {
  name: "FilterList",
  data() {
    return {
      items: [
        { name: "Name 1", price: "200" },
        { name: "Name 2", price: "100" },
        { name: "Name 3", price: "5" }
      ]
    };
  },
  methods: {
    shuffle() {
      this.items = _shuffle(this.items);
    }
  }
};
</script>

I do the example, but the animation does not happen.
Question: How to implement lodash.shuffle animation for a list?

Answer 1

You should never use an index as a key. So that this, as you have now, was not.
We make a normal key - everything is okay .