how to reach vue object properties to show them on head - vue.js

Question

I have a table where i show people's some properties. As these properties can be extended in the future, i need to show all the available properties in table head, and the related answers to those properties under table body
I can reach the people's properties with the syntax:
v-for='person in people' and {{people.name}}
But i need to dynamically write 'Name' to table head.
Is there any option to reach to the object properties like name, age, salary, country, etc. ?
ex: people={name:john, surname: black, age:35, country:german}
<table class="table table-filter">
<thead>
<tr>
<th>Key</th>
<th>Name</th>
<th>Age</th>
<th>Whatever</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value</td>
<td>John</td>
<td>35</td>
<td>Green</td>
</tr>
<tr>
<td>Value</td>
<td>Selin</td>
<td>23</td>
<td>Black</td>
</tr>
</tbody>

Answer 1

As with v-for directive you can cycle not only arrays, but objects also, just use second, nested v-for directive. Generic example:
<thead>
<tr>
<th v-for="val, key in person[0]"> // with first object in array
{{ key }} // show key - name for each column
</th>
</tr>
</thead>
<tbody>
<tr v-for="person, idx in people" :key="idx"> // with whole array
<td v-for="val, key in person"> // with each object in array
{{ val }} // show value for each column
</td>
</tr>
</tbody>

Answer 2

Accordibg to your sample data people={name:john, surname: black, age:35, country:german}
Key value in horizontal Table
<table>
<tr>
<th v-for="(value, index) in people">
{{ index }}
</th>
</tr>
<tr>
<td v-for="(value, index) in people">
{{ value }}
</td>
</tr>
<table>
Key value in vertical Table
<table>
<tr v-for="(value, index) in people">
<th>
{{ index }}
</th>
<td>
{{ value }}
</td>
</tr>
<table>