[Vuejs]-Vuetify v-data-table not displaying :headers and :items

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: