问如何使用vue v-for循环从嵌套对象生成包含合并行的表？

EN

<template>
  <div id="app">
    <table border="1" style="border-collapse: collapse">
      <tbody>
      <template v-for="(school, currentSchool) in data">
        <template v-for="(schoolClass, currentClass) in school.classes">
          <tr v-for="(student, currentStudent) in schoolClass.students">
            <td v-if="currentStudent+currentClass == 0" :rowspan="rowspanSchool[school.school_name]">
              {{school.school_name}}
            </td>
            <td v-if="currentStudent == 0" :rowspan="rowspanClass[schoolClass.class_name]">{{schoolClass.class_name}}</td>
            <td>{{student.student_name}}</td>
          </tr>
        </template>
      </template>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'app',
    computed: {
      rowspanSchool() {
        let schoolSpans = {};
        for (let school in this.data) {
          let total = 0;
          for (let schoolClass in this.data[school].classes) {
            for (let student in this.data[school].classes[schoolClass].students) {
              total++;
            }
          }
          schoolSpans[this.data[school].school_name] = total;
        }
        return schoolSpans
      },
      rowspanClass() {
        let classSpans = {};
        for (let school in this.data) {
          for (let schoolClass in this.data[school].classes) {
            let total = 0;
            for (let student in this.data[school].classes[schoolClass].students) {
              total++;
            }
            classSpans[this.data[school].classes[schoolClass].class_name] = total;
          }
        }
        return classSpans
      }
    },
    data() {
      return {
        data: arrayData
      }
    }
}
</script>