В Vuejs как я могу отобразить несколько столбцов и значений из JSON

Question

Я объявил требуемые заголовки для отображения в интерфейсе пользователя

 headers:{
     text: Name, value:'name'
     text: Age, value:'age'
     }

Здесь имя значения будет равно названию ключа снизу json

Я получаю json данные из бэкэнда который выглядит как

data = item: {id: '1234' name: 'John' age: '22 '}

Во-первых, я использую таблицу данных в котором я буду перебирать заголовки и отображать {{header.text}}. - Название столбца таблицы. Но для отображения значений из data- JSON {{header.value}} должен быть равен имени ключа в JSON. пример: имя из массива заголовков равно элементу: {имя: 'Джон'}

Мой код:

       <v-data-table :headers="headers" :items="data"  no-data-text="There are no data available">
        <template v-slot:headers="props">
          <tr>
            <th v-for="header in props.headers" :key="header.text">

              {{ header.text }}
            </th>
          </tr>
        </template>
        <template v-slot:items="props">
          <tr v-for="(header,index) in headers" :key="index">
            <td v-for ="(text , value) in header" :key="value">
              {{props.item.value}}
            </td>
          </tr>
        </template>
         </v-data-table>

Я не прав при переборе значений. Пожалуйста, помогите получить значения динамически.