Как реализовать изменение цвета объекта по условию? vue js

<template>
  <div class="container-fluid">
    <div class="row">
      <main role="main" class="col-md-12 ml-sm-auto col-lg-12 pt-3 px-4">
        <div class="col-md-12 ml-sm-auto col-lg-12 pt-3 px-4">
          <h3>Выберие дату</h3>
          <b-form-select v-model="sheetID">
            <option v-for="sheet in sheets" :key="sheet.index">{{ sheet.title }}</option>
          </b-form-select>
        </div>

        <div class="col-md-12 ml-sm-auto col-lg-12 pt-3 px-4 mb-4">
          <h3>Введите номер GPS</h3>
          <b-form-input v-model="gpsNumber" type="number" placeholder="Номер GPS" />
          <div class="my-3 mx-3">Value: {{ gpsNumber }}</div>
        </div>

        <div class="table-responsive">
          <table class="table table-striped ">
            <thead>
            <tr>
              <th>GPS</th>
              <th>Дата фактической загрузки</th>
              <th>Дата прибытия на ТЦ</th>
              <th>ФИО Водителя</th>
            </tr>
            </thead>
            <tbody>
            <Row v-for="row in filteredRows" :key="row.id" :row="row" />
            </tbody>
          </table>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import Row from '@/components/Row.vue';

const {GoogleSpreadsheet} = require('google-spreadsheet');
const creds = require('@/client_secret.json');
export default {
  name: "Sheet",
  components: { Row },
  props: ["sheet"],
  data() {
    return {
      loading: true,
      sheetID: "07.21",
      doc: null, 
      rows: [],
      gpsNumber: 0,
    }
  },
  watch: {
    sheetObj: 'updateRows',      // наблюдение за вычисляемым свойством (вынужденная мера из-за того,
  },                             // что автор Vue ленится добавлять поддержку промисов computed свойствам)
  computed: {
    sheets() {                                                //  обновляется при изменении `doc`
      return !this.doc ? [] : this.doc.sheetsByIndex; 
    }, 
    sheetObj() {                                              // обновляется при изменении `sheets` и `sheetID`
      return this.sheets.find(s => s.title === this.sheetID);
    }, 
    filteredRows() {                                          // обновляется при изменении `rows` и `gpsNumber`
      if (!String(this.gpsNumber).length) return this.rows; 
      const re = new RegExp('^' + String(this.gpsNumber).slice(0, 4)); 
      return this.rows.filter(row => re.test(row.GPS)); 
    }, 
  }, 
  methods: {
    async updateRows(sheet) {
      if (!sheet) return void(this.rows = []);
      const rows = await sheet.getRows({ offset: 0 }); 
      await sheet.loadCells('R1:R3000');
      const isColorWhite = ({ red, green, blue }) => [red, green, blue].every(c => +c === 1); 
      rows.forEach((row, idx) => {
        const bg = sheet.getCellByA1(`R${idx + 2}`).backgroundColor; 
        row.color = isColorWhite(bg) ? '#fff' : '#42b983'; 
      }); 
      this.rows = rows;           // это должно триггерить пересчет `filteredRows`
      this.$forceUpdate();        // но на всякий случай принудительно вызовем рендер шаблона, чтобы обновить все `Row`
    }, 
    async openDoc() {
      this.loading = true; 
      const doc = new GoogleSpreadsheet('14f_Sh9Qq01mxJZhgFqTbBHm8A7aCCgcpjpH-oHCj6o4');
      await doc.useServiceAccountAuth(creds);
      await doc.loadInfo();
      this.doc = doc;             // это триггерит пересчет computed свойств, по цепочке их зависимостей
      this.loading = false; 
    },
  },
  mounted() {
    this.openDoc();
  }, 
}
</script>