Vueitfy のUIコンポーネントにCSSスタイルを反映させる方法。

Vuetify のv-simple-tableというコンポーネントを使用して、
下記のようなデータテーブルを作成しました。

しかし、sub_name列の"g"の下線がついておらず、
styleを追加しコードを作成し直しました。
gの部分にborder-bottomで下線を入れたいと思っています。
しかし、下記のコードのstyleの部分は反映されず、
画面表示は変わりませんでした。
どうすれば、スタイルを反映させて、下線を入れることができるのか
どなたかご教示いただけませんでしょうか？

Vue.js
1<template>
2  <div>
3      <v-simple-table dense>
4          <thead>
5              <tr>
6                <th class="blue lighten-5">name</th>
7                <th class="blue lighten-5">sub_name</th>
8              </tr>
9          </thead>
10          <tbody>
11              <template v-for="item in items">
12                <tr :key="item.id">
13                  <td :rowspan="item.sub.length">{{item.name}}</td>
14                  <td>{{item.sub[0].name}}</td>
15                </tr>
16                <template v-for="(sub, i) in item.sub">
17                    <tr :key="sub.id" v-if="i != 0">
18                        <td v-text="sub.name"></td>
19                    </tr>
20                </template>
21              </template>
22          </tbody>
23          
24      </v-simple-table>
25  </div>
26</template>
27<script lang="ts">
28import { Component, Vue} from 'nuxt-property-decorator'
29import { dummyCssTest } from "~/store/dummy";
30
31@Component({})
32export default class extends Vue{
33    items:any=[]
34    mounted(){
35        this.items = dummyCssTest
36    }
37}
38</script>
39<style lang="scss" scoped>
40table{
41  border-collapse: collapse!important;
42}
43table, td{
44  border-bottom: thin solid regba(0,0,0,0.12)!important;
45}
46</style>

サンプルデータ部分のコード

TypeScript
1export const dummyCssTest = [
2    {
3        id:"1",
4        name:"a",
5        sub:[
6            {id:"1#1",name:"b"},
7            {id:"1#2",name:"c"},
8        ]
9    },
10    {
11        id:"2",
12        name:"d",
13        sub:[
14            {id:"2#1",name:"e"},
15            {id:"2#2",name:"f"},
16            {id:"2#3",name:"g"},
17        ]
18    },
19]