Insert data from custom jsontable into q-table

[acros]

I got this pen with a qtable.
https://codepen.io/haangglide/pen/WNGbYXr

Im storing data in a json table with the following structure:

[
  {
    "id": 1,
    "name": "Diana", 
    "age": 5,
    "location": "Mumbai",
    "color": "blue"
  },
  {
    "id": 2,
    "name": "Billy",
    "age": 4,
    "location": "Detroit",
    "color": "green"
  },
  {
    "id": 3,
    "name": "Mimmi",
    "age": 3,
    "location": "New York",
    "color": "green"
  }
]

This works fine but I need to have another structure on my data with a nested properties object for other situation in my application. I need this structure:

[{
    "id": 1,
    "properties": {
      "name": "Diana",
      "age": 5,
      "location": "Mumbai",
      "color": "blue"
    }
  },
  {
    "id": 2,
    "properties": {
      "name": "Billy",
      "age": 4,
      "location": "Detroit",
      "color": "green"
    }
  },
  {
    "id": 3,
    "properties": {
      "name": "Mimmi",
      "age": 3,
      "location": "New York",
      "color": "green"
    }
  }
]

How can I populate a table with this structure instead?

Here is my javascript:

new Vue({
  el: '#q-app',
  data () {
    return {
      loading: false,
      filter: "",
      rowCount: 10,
        columns: [
        {
          name: "name",
          required: true,
          label: "Name",
          align: "left",
          field: "name",
          sortable: true
        },
        {
          name: "age",
          required: true,
          label: "Age",
          align: "left",
          field: "age",
          format: val => `${val}`,
          sortable: true
        },
        {
          name: "location",
          required: true,
          label: "Location",
          align: "left",
          field: "location",
          format: val => `${val}`,
          sortable: true
        }
      ],
      data: [
        {
          id: 1,
          name: "Diana", 
          age: 5,
          location: "Mumbai",
          color: "blue"
        },
        {
          id: 2,
          name: "Billy",
          age: 4,
          location: "Detroit",
          color: "green"
        },
        {
          id: 3,
          name: "Mimmi",
          age: 3,
          location: "New York",
          color: "green"
        }
      ]
    }
  },

 methods: {
    tableFormat(val) {
      console.log(val)
      if (val.color === "blue") {
        return "marked-row";
      } else {
        return "unmarked-row";
      }
    }
  }
})

and html:

<div id="q-app">
  <div class="q-pa-md">
    <q-table
        :data="data"
        :columns="columns"
        row-key="id"
        :filter="filter"
        :loading="loading"
        :rows-per-page-options="[5]"
    >
        <template v-slot:body="props">
          <q-tr :props="props" :class="tableFormat(props.row)">
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
              {{col.value}}
            </q-td>
          </q-tr>
        </template>
    </q-table>
  </div>
</div>

[beets]

@acros From the docs:

    // row Object property to determine value for this column
    field: 'name',
    // OR field: row => row.some.nested.prop,

So you would use:

field: row => row.properties.name,