v-data-table button loading per row

Question

Using vue v2.5 with vueCLI 3 trying to have a v-data-table that on each row have a button, when this button clicked should make it appear as loading.

v-btn has loading property by default, really I don't know why is not working...

    <v-data-table
      :headers="headers"
      :items="records"
      @dblclick:row="editRowCron_jobs">
      <template v-slot:[`item.actions`]="props">
        <v-btn color="blue-grey" :loading="props.item.createloading" fab dark small @click="ManuralRun(props.item)">
          <v-icon dark>mdi-google-play</v-icon>
        </v-btn>
      </template>
    </v-data-table>

On the click method, I can read but not set the item

export default {
  data() {
    return {
      headers: [
           { text: "id", value: "id", align: " d-none" }, 
           { text: "actions", value: "actions" }
        ],
        records: [] //grid rows filled by API
      }
    },
    methods: {
         ManuralRun(item){
           this.records[2].createloading=true; //even I set it like that, nothing happens
           item.createloading = true;          //property changed here - ok
           console.log(item);                  //here outputs the clicked item - ok
        },

Answer 1

so, according to this

the property MUST pre-exist in the array, that means, when we get the result from the API, we have to add the property as:

this.records = data.data.map(record => {
    return {
        createloading: false, 
        ...record
    }
})