データテーブルでrowspan で作成した部分における、ポインターの付け方について

Question

データテーブルをNuxt.jsのフレームワークである、Vuetify.jsを使用して下記のように作成しました。

rowspanを使用して上記のデータテーブルを作成しています。
最初の列（XX .Incに当たる部分）を選択すると、ほかの列の行（business,sales,marketingにあたる部分）も選択させるようにしたいのですが、現状一列目しか選択されません。

コードは下記のようになるのですが、
どのようにすれば、最初の列を選択すると、その列に含まれる全ての行も選択されるようにできますでしょうか？
どなたかご教示いただけませんでしょうか？
私が作成したコードは下記です。

<template>
  <v-simple-table dense>
    <thead>
      <tr>
        <th>company</th>
        <th>division</th>
        <th>section</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="3">XX Inc.</td>
        <td>H/R</td>
        <td>H/R</td>
      </tr>
      <tr>
        <td rowspan="2">business</td>
        <td>sales</td>
      </tr>
      <tr>
        <td>marketing</td>
      </tr>
    </tbody>
  </v-simple-table>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({})
export default class extends Vue {}
</script>
<style lang="scss" scoped>
.v-data-table--dense > .v-data-table__wrapper > table > tbody > tr > td {
  border-bottom: thin solid rgba(0, 0, 0, 0.12) !important;
}
</style>