JSFiddle - React, Tailwind, and code Playground

HTML

<div id="root">
    <button @click="add">Add</button>
    <button @click="remove">Remove</button>
    <button @click="shuffle">Shuffle</button>
    <transition-group name="bar" tag="div">
      <span v-for="task in tasks" :key="task" class="numbers">{{task}}</span>
    </transition-group>
  </div>

CSS

.bar-enter-active,
    .bar-leave-active {
      transition: all 1s;
    }

    .bar-enter,
    .bar-leave-to {
      opacity: 0;
      transform: translateY(30px)
    }

    .bar-move {
      transition: transform 1s
    }

    .numbers {
      margin-right: 10px;
      display: inline-block
    }

JavaScript

var app = new Vue({
      el: "#root",
      data: {
        tasks: [1, 8, 9],
        nextNum: 10
      },
      methods: {
        randIndex: function() {
          return Math.floor(Math.random() * this.tasks.length);
        },
        add: function() {
          this.tasks.splice(this.randIndex(), 0, this.nextNum++);
        },
        remove: function() {
          this.tasks.splice(this.randIndex(), 1);
        },
        shuffle: function() {
          var array = this.tasks;
          var currentIndex = this.tasks.length;
          var randomIndex;
          var tempVal;

          for (var i = currentIndex - 1; i > 0; i--) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            tempVal = array[i];
            this.$set(array, i, array[randomIndex]);
            this.$set(array, randomIndex, tempVal);
          }
        },
        moveIndex: function(array) {
          return array;
        }
      }
    });