JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sample">
  <ul>
    <li v-for="item in items">
      <app-random :min="item.from" :max="item.to"></app-random>
    </li>
  </ul>
  <hr>
  <button @click="onShuffle">
    Shuffle
  </button>
</div>

JavaScript

Vue.component('app-random', {
  props: {
    min: Number,
    max: Number
  },
  data(){
    return {
      num: Math.floor(Math.random() * (this.max - this.min + 1)) + this.min
    }
  },
  created(){
    console.log('change');
  },
  template: ` <span class="random">{{ num }}</span>`
});

let sample = new Vue({
  el: '.sample',
  data: {
    items: [
      {from: 1, to: 4},
      {from: 5, to: 8},
      {from: -4, to: -1}
    ]
  },
  methods: {
    onShuffle(){
      this.items = this.items.sort(() => Math.random() > 0.5 ? 1 : -1);

      console.log('---------');

      this.items.forEach((item) => {
        console.log(item.from + ':' + item.to);
      });
    }
  }
});