Increase font size of header in v-data-table Vuetify

Question

I am trying to increase the font size of the headers to make it more distinctive to the rows in the table which is plot using v-data-table. I refereed to the solutions in the similar questions Question 1 and Question 2 but the solutions didn't seem to work. Attached is also the code which is responsible for the text size of the header which is edited using the Google Developer Tool ( Inspect Element). Any advices on where or how I can edit this part of the code

Code :

<v-data-table
              :headers="tableFields"
              :items="programs"
              :items-per-page="5"
              class="elevation-1">
                    <template v-slot:[`item._id.$oid`]="{ item }">
                      {{item._id.$oid}}
                    </template>
</v-data-table>

Script Code :

 data () {
      return {
        tableFields: [
          {text:'ID',value:'_id.$oid'},
          {text:'Tag',value:'tags'},
          {text:'Score (Product)',value:"scores.product",},
          {text:'Last Modified Date',value:'DateModified'},  
          {text: 'Actions', value: 'action', sortable: false, align: 'center'},
        ],

Answer 1

Apply a style that specifically targets the v-data-table header class:

thead.v-data-table-header th[role=columnheader] {
  font-size: 14px !important;
}

Answer 2

Use this style to increase the header font size:

.v-data-table .v-data-table-header tr th {
  font-size: 24px !important;
}

demo