Vue.jsでrowspanで結合される範囲を動的に表現したい。

Question

rowspanに動的に値を渡して、下記のような図を作成したいと思い
コードを作成したのですが、現状画面に"An Error Occurred"と表示され
何も表示されていない状態です。

](16e3c89f4167fc64a5a975f6bd3cec1f.png)

rowspanのルールなのですが、
下記のデータのsub:[]の部分のidの#の前の部分がnameのidと同じ文字の場合は、
その数だけ、nameの列を結合させたいと思っています。

export const dummyCssTest = [
    {
        id:"1",
        name:"a",
        sub:[
            {id:"1#1",name:"b"},
            {id:"1#2",name:"c"},
        ]
    },
    {
        id:"2",
        name:"d",
        sub:[
            {id:"2#1",name:"e"},
            {id:"2#2",name:"f"},
            {id:"2#3",name:"g"},
        ]
    }
]

実際にVueを使用して作成したコードは下記です。

<template>
  <div>
      <v-simple-table dense>
          <thead>
              <tr>
                <th class="blue lighten-5">name</th>
                <th class="blue lighten-5">sub_name</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for="item in items" :key="item.id">
                  <td :rowspan="[sub.length]">{{item.name}}</td>
                  <td>{{item.sub[sub.length].name}}</td>
              </tr>
          </tbody>
      </v-simple-table>
  </div>
</template>
<script lang="ts">
import { Component, Vue} from 'nuxt-property-decorator'
import { dummyCssTest } from "~/store/dummy";

@Component({})
export default class extends Vue{
    items:any=[]
    mounted(){
        this.items = dummyCssTest
    }
}
</script>
<style lang="scss" scoped>

</style>

どなたかご教示いただけませんでしょうか？