JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="app">
  <ul>
    <li v-for="p in persons" v-bind:key="p.id">{{ p.name }} (ID: {{ p.id }}) <input type="text"></li>
  </ul>
  
  <button v-on:click="shuffle()">Shuffle</button>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	persons: [
	    { id: 1, name: 'Andy' },
      { id: 2, name: 'Abby' },
      { id: 3, name: 'Teresa' },
      { id: 4, name: 'Ter' }
    ]
  },
  methods: {
    shuffle: function() {
    	this.persons = this.shuffleArray(this.persons);
    },
    shuffleArray: function (arr) {
    	var newArr = arr.slice();
    
      for (var i = newArr.length - 1; i > 0; i--) {
          var j = Math.floor(Math.random() * (i + 1));
          var temp = newArr[i];
          newArr[i] = newArr[j];
          newArr[j] = temp;
      }
      
      return newArr;
		}
  }
});