Установите переключатель true или false в таблице q на основе данных из API в VueJS

Question

Я новичок в VueJs и Quasar. У меня есть требование, когда я должен отображать данные в формате таблицы. В каждой строке будет переключатель для регистрации. Как только я включаю несколько строк и нажимаю кнопку «Зарегистрироваться», данные сохраняются в БД через вызов API. Я могу сделать это правильно. Однако, когда страница загружается, мне нужно вызвать метод GET, чтобы получить строки, которые уже включены из API, и соответствующие кнопки переключения должны быть включены. Можно ли перебрать таблицу для установки переключателей? Если да, то как? . Можно ли это сделать при визуализации q-таблицы. Методы, используемые для получения данных таблицы и предварительно выбранных строк, различны и не могут быть объединены для получения включенных строк. Любая помощь будет оценена. заранее спасибо. Код:

HTML:

<template>
    <div>
        <q-card bordered class="q-mt-md">
          <q-table
            id="rTable"
            title=""
            :data="rAccData"
            :columns="rAccColumns"
            :dense="true"
            :rows-per-page-options="[0]" 
            :pagination.sync="pagination"
            hide-bottom
          >
            <template v-slot:body-cell-enroll="props">
              <q-tr :props="props">
                <q-td :props="props">
                  <div>
                    <q-toggle v-model="props.row.rToggle" checked-icon="check" value="check" />
                  </div>
                </q-td>
              </q-tr>
            </template>
            <template v-slot:body-cell-dAcc="props">
              <q-tr :props="props">
                <q-td :props="props">
                  <div>
                    <cu-select 
                      v-model="props.row.accSelected"
                      :options="accOptions"
                      option-value="Id"
                      option-label="Id" 
                    />
                  </div>
                  <q-card v-if="hasValidationError" v-modal="props.row.hasValidationError" style="color:Red" />
                  <span style="color:red"> {{ props.row.errorMess }}</span>
                </q-td>
              </q-tr>
            </template>
          </q-table>
        </q-card>
      </div>      
</template>

VueJS:

const componentName = 'Riu';
export default {  
  name: componentName,
  meta: {
    title: 'RIU'
  },
  data() {
    return {
          riArr: [],
          errorMess: '',
          rToggle: true,
          Depselected: '',
          accSelected: '',
          pagination: {
             page: 1,    
             rowsPerPage: 0 // 0 means all rows    
          },
          rAccColumns: [
        {
          name: 'enroll',
          required: true,
          label: 'Enrollment',
          align: 'left',
          field: 'enroll'          
        },
        {
          name: 'Acc',
          label: 'AccId',
          field: 'Acc',
          style: 'width: 200px',
          align: 'left'
        },
        {
          name: 'dAcc',
          label: 'dAcc',
          field: 'dAcc',
          align: 'left',
          style: 'width: 150px'
         }
       ]

    };
  },
  computed: {
    ...mapGetters('ind', ['Ind', 'Acc']),
    hasValidationError() {
       return this.errorMess !== '';
    },
    rAccData() {
      return this.Acc.filter(a => a.testType === testTypeEnum.A1);
    },
    accOptions() {
      return this.Acc.filter(a => a.byId === 100);  
    }
  },
  watch() { },
  methods: {
    ...mapActions('ind', ['Ind', 'Acc']),
    
      getPreselectedAcc() {
        // api call to get the data      
      this.riArr = response.data.payload; // result will be a list of objects with the properties 'indId','Acc','dAcc'
          return this.riuArr;   
        })
        .catch(function(error) {
          console.log(error);
        });
   }
  },
  mounted () {
    this.getInd();
    this.getPreselectedAcc(); 
    this.getAcc();    
  }
}