populate veutify data-table with array containing array - vue.js

Question

I am very new to Vue and have been happy with the Vuetify framework for my project. However, I am unable to build a data table from an array, which I think is related to the payload. I only need to display a few values in the table, but would like them all there when I click a row.
Here is the (abbreviated) user payload:
[
{
"userId":3,
"firstName":"Sid",
"lastName":"Vicious",
"phoneNumber":"3132587777",
"devices":[
{
"deviceId":"1",
"deviceType":"phone"
"manufactureDate":null
}
]
},
{
"userId":4,
"firstName":"Johnny",
"lastName":"Rotten",
"phoneNumber":"3132587778",
"devices":[
{
"deviceId":"2",
"deviceType":"phone"
"manufactureDate":null
}
]
}
]
Here is the table:
<v-data-table
:headers="headers"
:items="users"
:items-per-page="10"
class="elevation-1 px-10 a-2"
#click:row="handleClick">
</v-data-table>
...
data() {
return {
headers: [
{
text: "Last Name",
align: "start",
sortable: true,
value: "lastName",
},
{
text: "First Name",
align: "start",
sortable: true,
value: "firstName",
},
{ text: "Phone", value: "phoneNumber" }
]
...
users = [
{
"userId":3,
"firstName":"Sid",
"lastName":"Vicious",
"phoneNumber":"3132587777",
"devices":[
{
"deviceId":"1",
"deviceType":"phone"
"manufactureDate":null
}
]
},
{
"userId":4,
"firstName":"Johnny",
"lastName":"Rotten",
"phoneNumber":"3132587778",
"devices":[
{
"deviceId":"2",
"deviceType":"phone"
"manufactureDate":null
}
]
}
]
}
And when I populate the users list, I get the following error:
[Vue warn]: Invalid prop: type check failed for prop "item". Expected
Object, got Array

Answer 1

The solution was to iterate over the user list, and for each item, do a array.push(item)