Vue.js Render Object as Table in Beautiful Way

In Vue.js we can use v-for to render Array as HTML Table or List beautifully, but If we want render Object key and value as Table, for example, I use JS Object and Array to store many Contact info, each Contact have different key, I want display Contact 1 info in a table, It seems v-for not good at here?

For Example, I want convert JS Object to HTML like below:

{
  "name": "Karl",
  "age": 10,
  "school": "NTUST"
}

HTML:

<p>name：Karl</p>
<p>age：10l</p>
<p>school：NTUST </p>

At the first time, I try to use Object.keys and v-for to solve this situation but It is very dirty I think, and then I found a good syntax can solve it:

<p v-for="(val, key) in contacts[0]">{{key}}：{{val}}</p>