Vue js의 v-for 반복문에서 중첩된 JSON 객체 가져오는 법

JSON 구조

버스 목록 데이터와 그 하위 필드에 정류소에 대한 데이터가 중첩되어 있는 형태

var busObj = [{
    district: "4",
    districtName: "서대문구",
    busNo: "1234",
    routes: [
        {name: "정류장명 1", time: "09:00"},
        {name: "정류장명 2", time: "09:10"}
        {name: "정류장명 3", time: "09:20"}
    ]
},
{
    district: "9",
    districtName: "마포구",
    busNo: "5678",
    routes: [
        {name: "정류장명 1", time: "10:00"},
        {name: "정류장명 2", time: "10:10"}
        {name: "정류장명 3", time: "10:20"}
    ]
}]

V-for 반복문

<ul class="tbody-box" id="busApp">
  <li v-for="(bus, index) in list">
    <p>
      {{ bus.district }}
    </p>
    <p>
      {{ bus.districtName }}
    </p>
    <p>
      {{ bus.busNo }}
    </p>
    <div>
      <p>정류소 목록</p>
      <table class="klmc-table">
        <thead>
          <tr>
            <th scope="col">번호</th>
            <th scope="col">승차 장소</th>
            <th scope="col">시각</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(route, index) in bus.routes">
            <td>{{ index + 1 }}</td>
            <td>{{ route.name }}</td>
            <td>{{ route.time }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </li>
</ul>

<script>
  var bus = new Vue({
    el: '#busApp',
    data: { 
      list: busObj,
    }
  });
</script>

참고

https://stackoverflow.com/questions/52099089/how-to-get-nested-json-data-in-vue-js