How to output information to a table in Vuetify from a JSON request of a Vue.js project?

Question

css

I am making a request to the server using axios in a vue.js project. I receive the data from the server and I try to arrange them in the table. To begin with, I try to put in one column information about count, which is equal to 1 (for verification). The table is displayed empty. I insert JSON locally into the vue file, then everything works. The question is what is my mistake and how to do it right? How to put information in different cells if the json footcloth is longer, through js sorting?

I receive the following data:

{
"data": {
"status": 0,
"response": [
{
"id": "1",
"owner": "l",
"status": "NEW",
"cfg": {
"count": 1,
"accept": [
"false"
],
"amount": {
"currency": "R",
"min": 1,
"max": "10"
},
"sender": {
"bank": {
"Agt": {
"type": "Ot",
"value": "5555",
"name": [
"вязь"
],
"currency": "R",
"addr": {
"country": "RU"
}
},
"Acct": {
"type": "Ot",
"value": "331"
},
"AgtAcct": {
"type": "Ot",
"value": "301"
}
},
"client": {
"name": [
"Рог"
],
"Acct": {
"type": "Ot",
"value": "331"
}
}
},
"recipient": {
"bank": {
"Agt": {
"type": "Othr",
"value": "04",
"name": [
"вязь"
],
"currency": "R",
"addr": {
"country": "RU"
}
},
"Acct": {
"type": "Ot",
"value": "331"
},
"AgtAcct": {
"type": "Ot",
"value": "301"
}
},
"client": {
"name": [
"Cor"
],
"Acct": {
"type": "Ot",
"value": "331"
}
}
}
}

Table vuetify form:

<template>
       <div>

      <v-data-table
        :headers="headers"
        :items="arrayGetGroup"
        :items-per-page="5"
        sort-by="calories"
        class="elevation-1"
      >
       <template v-slot:top>
          <v-toolbar app color="primary" dark>
            <v-toolbar-title>Тест</v-toolbar-title>
            <v-divider
              class="mx-4"
              inset
              vertical
            ></v-divider>
            <v-spacer></v-spacer>
          </v-toolbar>
        </template>
      </v-data-table>

        </div>
    </template>

The script is the following

<script>
import axios from 'axios'

  export default {

    data: () => ({
      value: [],
      arrayGetGroup:[],
      headers: [
        {
          text: 'Номер',
          align: 'left',
          value: 'number',
        },
        { text: 'Сюда', value: 'arrayGetGroup.data.response[0].count' },
        { text: 'ММ', value: '' },
        { text: 'Ак', value: '' },
      ],
    }),
       mounted() {
        axios.post(cURL,
      {
        request_type: configuration,
        request: GetGroup
      })
      .then(response => (this.arrayGetGroup = response))
      .catch(error => console.log(error))
  },

  }
</script>

Answer 1

Answer 2

The decision will be next on this issue

.then(response => (this.arrayGetGroup = response.data.response.))

And here is the fix with

{ text: 'Сюда', value: 'arrayGetGroup.data.response[0].count' },

on the
{ text: 'Сюда', value: 'count' },