Vue使用v-for遍历API响应的嵌套数组

{
  "data": [
    {
      "id": 1,
      "name": "John",
      "pets": [
        {
          "id": 1,
          "name": "Dog"
        },
        {
          "id": 2,
          "name": "Cat"
        }
      ]
    },
    {
      "id": 2,
      "name": "Jane",
      "pets": [
        {
          "id": 3,
          "name": "Bird"
        },
        {
          "id": 4,
          "name": "Fish"
        }
      ]
    }
  ]
}

<div v-for="item in data" :key="item.id">
  <h2>{{ item.name }}</h2>
  <ul>
    <li v-for="pet in item.pets" :key="pet.id">{{ pet.name }}</li>
  </ul>
</div>