Кто поможет с исправлением ошибки?

Был код:

<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" @input="accessSpreadSheet">
            <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" @input="search"></b-form-input>
          <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-bind:key="row.id" v-for="row in rows" v-bind: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 {
      allRows: [],
      rows: [],
      sheetID: "07.21",
      loading: true,
      selected: null,
      sheets: [],
      newSheets: [],
      gpsNumber: 0,
      color: [],
      cells: [],
    }
  },
  methods: {
    async accessSpreadSheet() {
      let y;
      const doc = new GoogleSpreadsheet('14f_Sh9Qq01mxJZhgFqTbBHm8A7aCCgcpjpH-oHCj6o4');
      await doc.useServiceAccountAuth(creds);
      await doc.loadInfo();
      const sheet = doc.sheetsByIndex[doc.sheetsByIndex.findIndex((b) => b.title === this.sheetID)];

      const rows = await sheet.getRows({
        offset: 0
      })

      this.rows = rows;
      this.allRows = rows;
      await sheet.loadCells('R1:R3000');

      for (y = 0; y < this.allRows.length; y++) {
        this.allRows[y]["color"] = (sheet.getCellByA1('R' + (y+2).toString()).backgroundColor)
      }
    },

    async search() {
      let z;
      if (this.gpsNumber === 0 || this.gpsNumber.length === 0) {
        this.rows = this.allRows;
      }

      if (this.gpsNumber.length !== 0 && this.gpsNumber.length !== 0) {
        this.newSheets = [];

        if (this.gpsNumber.toString().length === 1) {
          this.newSheets = [];
          for (z = 0; z < this.allRows.length; z++) {
            if (this.allRows[z].GPS.substr(0, 1) == this.gpsNumber.toString()) {
              this.newSheets.push(this.allRows[z])
            }
          }
        }

        if (this.gpsNumber.toString().length === 2) {
          this.newSheets = [];
          for (z = 0; z < this.allRows.length; z++) {
            if (this.allRows[z].GPS.substr(0, 2) == this.gpsNumber.toString()) {
              this.newSheets.push(this.allRows[z])
            }
          }
        }

        if (this.gpsNumber.toString().length === 3) {
          this.newSheets = [];
          for (z = 0; z < this.allRows.length; z++) {
            if (this.allRows[z].GPS.substr(0, 3) == this.gpsNumber.toString()) {
              this.newSheets.push(this.allRows[z])
            }
          }
        }

        if (this.gpsNumber.toString().length === 4) {
          this.newSheets = [];
          for (z = 0; z < this.allRows.length; z++) {
            if (this.allRows[z].GPS.substr(0, 4) == this.gpsNumber.toString()) {
              this.newSheets.push(this.allRows[z])
            }
          }
        }
        this.rows = this.newSheets;
      }
    },

    async sheetsList() {
      let i;
      const doc = new GoogleSpreadsheet('14f_Sh9Qq01mxJZhgFqTbBHm8A7aCCgcpjpH-oHCj6o4');
      await doc.useServiceAccountAuth(creds);
      await doc.loadInfo();
      for (i = 0; i < doc.sheetsByIndex.length; i++) {
        this.sheets.push(doc.sheetsByIndex[i])
      }
    },
  },
  created() {
    this.accessSpreadSheet();
  },
  mounted() {
    this.sheetsList();
  }

}
</script>

<style scoped>

</style>

Суть в том что в объекту allRows добавляется свойство color со значением получаемым из API Google Sheets в виде {red: 0.57254905, green: 0.8156863, blue: 0.3137255}. Задача выводить записи в шаблон с разными фонами по условию. Если ответ от апи отличный от {red: 1, green: 1, blue: 1} то фон зеленый, а если {red: 1, green: 1, blue: 1} то белый.

Vue 2 версии

После попытки решения и рефакторинга кода получился такой код:

<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, 
      gpsNumber: 0,
    }
  },
  computed: {
    sheets() {
      return !this.doc ? [] : this.doc.sheetsByIndex; 
    }, 
    sheet() {
      return this.sheets.find(s => s.title === this.sheetID);
    }, 
    async sheetRows() {
      if (!this.sheet) return []; 
      const rows = await this.sheet.getRows({ offset: 0 }); 
      await this.sheet.loadCells('R1:R3000');
      const isColorWhite = ({ red, green, blue }) => [red, green, blue].every(c => +c === 1); 
      rows.forEach((row, idx) => {
        const bg = this.sheet.getCellByA1(`R${idx + 2}`).backgroundColor; 
        row.color = isColorWhite(bg) ? '#fff' : '#42b983'; 
      }); 
      return rows; 
    }, 
    async filteredRows() {
      if (!String(this.gpsNumber).length) return this.sheetRows; 
      const re = new RegExp('^' + this.gpsNumber.slice(0, 4)); 
      return this.sheetRows.filter(row => re.test(row.GPS)); 
    }, 
  }, 
  methods: {
    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>

Но все сломалось( 

Помогите решить проблему пожалуйста. Я во vue новичок)