Vuetify v-data-table not displaying :headers and :items

I'm trying to build a Vue project using typescript. My v-data-table component inside Schedule.vue is not displaying. Instead all I see is the following:

I've tried googling everything I can but with no luck. I'm now at a point where I just re-create my project from scratch.

Here is my Schedule.vue file:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<template>
  <div>
    <v-container>
      <v-row>
        <v-col>
          <v-data-table :headers="daoHeaders" :items="daoItems" :items-per-page="5" class="elevation-1">
            <v-toolbar-title>{{ dsTitle }}</v-toolbar-title>
          </v-data-table>
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          This is below the table
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      daoHeaders: [
        { title: 'Sport', key: 'sportName', align: 'start', sortable: true },
        { title: 'League', key: 'leagueName' },
        { title: 'Grade Level', key: 'gradeLevel' }
      ],
      daoItems: [
        { sportName: 'Basketball', leagueName: 'Spring Basketball League', gradeLevel: '6-12' }
      ],
      dsTitle: 'This is my Title'
    }
  },
  methods: {
  }
});
</script>

<!-- end snippet -->

Here is my index.ts file:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

/**
 * plugins/index.ts
 *
 * Automatically included in `./src/main.ts`
 */

// Plugins
import { loadFonts } from './webfontloader'
import vuetify from './vuetify'
import router from '../router'

// Types
import type { App } from 'vue'

export function registerPlugins (app: App) {
  loadFonts()
  app
    .use(vuetify)
    .use(router)
}

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

Here is my main.ts file:

<!-- language: lang-html -->

/**
 * main.ts
 *
 * Bootstraps Vuetify and other plugins then mounts the App`
 */

// Components
import App from './App.vue'

// Composables
import { createApp } from 'vue'

// Plugins
import { registerPlugins } from '@/plugins'

const app = createApp(App)

registerPlugins(app)

app.mount('#app')

<!-- end snippet -->

Here is my tsconfig.json file:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "paths": {
      "@/*": [
       "src/*"
      ]
     }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/main.ts"],
  "references": [{ "path": "./tsconfig.node.json" }],
  "exclude": ["node_modules"]
}

<!-- end snippet -->

I think you are using the wrong naming in your v-data-table headers.

To show the data. Change your daoHeaders from title and key to text and value.

FROM

daoHeaders: [
        { title: 'Sport', key: 'sportName', align: 'start', sortable: true },
        { title: 'League', key: 'leagueName' },
        { title: 'Grade Level', key: 'gradeLevel' }
      ],

TO

daoHeaders: [
          { text: 'Sport', value: 'sportName', align: 'start', sortable: true },
          { text: 'League', value: 'leagueName' },
          { text: 'Grade Level', value: 'gradeLevel' }
        ],

Output: