<script src="https://unpkg.com/vue/dist/vue.js"></script>

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

<div id="flip-list-demo" class="demo">

  <button v-on:click="shuffle">Shuffle</button>

  <transition-group name="flip-list" tag="ul">

    <li v-for="item in items" :key="item">

      {{ item }}

    </li>

  </transition-group>

</div>

<script>

new Vue({

  el: '#flip-list-demo',

  data: {

    items: [1,2,3,4,5,6,7,8,9]

  },

  methods: {

    shuffle: function () {

      this.items = _.shuffle(this.items)

    }

  }

})

</script>

<style>

.flip-list-move {

  transition: transform 1s;

}

</style>