Как правильно показывать лучшее и худшее значение в таблице Vue?

Question

[ar5]

Здравствуйте, есть массив данных, где есть значение скорости и времени. Нужно показывать в табличке наименьшее значение времени и наибольшее значение скорости если значения равны то выделить оба варианта. Сам алгоритм не проблема, я его написал и выглядит он так. При вызове метода set сначала обрабатывается массив выделяются лучшие значения а потом происходит изменение массива. Знаю что код написан не оптимально, ведь это лишь пример Суть вопроса как сделать это правильно в Vue? Есть директивы, вычисляемые свойства. Есть ли какое-то более правильное решение данной задачи?
Код ниже:

var table = new Vue({
            el: '#app-4',
            template: `
              <div v-if="visible" id="sumTable">
              <table id="dataTable">
                <tbody>
                  <tr v-for="(competitor,index) in competitors">
                    <td>{{competitor.start}}<span style="color:red" v-if="bestOf.start[index]">&#9733</span></td>
                    <td>{{competitor.speed}}<span style="color:red" v-if="bestOf.speed[index]">&#9733</span></td>
                  </tr>
                  </tbody>
              </table></div>`,
            data: {
                visible: false,
                competitors: [{
                    start: '',
                    speed: '',
                }],
                bestOf: {
                    start: {},
                    speed: {},
                }
            },
            created: function () {
                window.addEventListener('keyup', this.tableVisible)
            },
            methods: {
                tableVisible: function (event) {
                    if (event.keyCode === 88) {
                        this.visible = !this.visible;
                        if (this.visible) {
                            window.calculateRaceStatsTable()
                        }
                    }
                },
                set: function (newArray) {
                    newArray.data.forEach(function(competitor,index,array){
                        if (!this.bestOf['start'].value || this.bestOf['start'].value > parseFloat(competitor['start'])){
                            this.bestOf['start'] = {};
                            Vue.set(this.bestOf['start'],'value',parseFloat(competitor['start']))
                            Vue.set(this.bestOf['start'],index,true)
                        } else if (this.bestOf['start'].value === parseFloat(competitor['start'])) {
                            Vue.set(this.bestOf['start'],index,true)
                        }
                        if (!this.bestOf['speed'].value || this.bestOf['speed'].value < parseFloat(competitor['speed'])){
                            this.bestOf['speed'] = {};
                            Vue.set(this.bestOf['speed'],'value',parseFloat(competitor['speed']))
                            Vue.set(this.bestOf['speed'],index,true)
                        } else if (this.bestOf['speed'].value === parseFloat(competitor['speed'])) {
                            Vue.set(this.bestOf['speed'],index,true)
                        }
                    }.bind(this))
                    this.competitors = newArray.data.slice()
                }
            }
        })

Answer 1

[0xD34F]

Делаем вычисляемые свойства минимума и максимума:

computed: {
  minStart() {
    return Math.min(...this.competitors.map(n => n.start));
  },
  maxSpeed() {
    return Math.max(...this.competitors.map(n => n.speed));
  },
},

И при выводе данных добавляем класс в случае равенства этим свойствам:

<tr v-for="{ start, speed } in competitors">
  <td :class="{ best: start === minStart }">{{ start }}</td>
  <td :class="{ best: speed === maxSpeed }">{{ speed }}</td>
</tr>

https://jsfiddle.net/gs8doqfc/