Vuetify 3 Data Table Header Slots Are Not Rendering

I'm having trouble displaying header cells in my Vuetify 3 data table. Everything else works — sort arrows appear on hover, and the table displays data correctly — but the header texts never render.

I’ve tried multiple approaches including setting header properties using both the “title” and “text” values in my headers array, and hardcoding the header content directly in the template with explicit slot definitions. For example, here’s part of my code:

VUECopied
<template>
<v-container>
<v-row>
  <v-col>
    <v-btn color="primary" @click="fetchReports" class="mb-4">Refresh</v-btn>

    <!-- Data Table -->
    <v-data-table
      :headers="headers"
      :items="reports"
      class="elevation-3 observation-table"
      dense
      outlined
      rounded
    >
      <!-- Explicit header slots -->
      <template #column.id>
        <strong>ID</strong>
      </template>
      <template #column.user>
        <strong>User</strong>
      </template>
      <template #column.report_date>
        <strong>Report Date</strong>
      </template>
      <template #column.location>
        <strong>Location</strong>
      </template>

      <!-- Body Rows -->
      <template #body="{ items }">
        <tr
          v-for="item in items"
          :key="item.id"
          @click="viewReport(item)"
          class="clickable-row"
        >
          <td>{{ item.id }}</td>
          <td>{{ item.user }}</td>
          <td>{{ formatDate(item.report_date) }}</td>
          <td>{{ item.location }}</td>
        </tr>
      </template>
    </v-data-table>


    <!-- Button to Navigate to Form -->
    <v-btn color="primary" class="mt-4" @click="navigateToForm">
      Create Observation Report
      </v-btn>
     </v-col>
   </v-row>
  </v-container>
</template>

JAVASCRIPTCopied
<script>
import axios from "axios";

export default {
  data() {
    return {
      reports: [],
      headers: [
        { text: "ID", value: "id" },
        { text: "User", value: "user" },
        { text: "Report Date", value: "report_date" },
        { text: "Location", value: "location" },
      ],
      search: "",
    };
  },
  methods: {
    async fetchReports() {
      try {
        const token = localStorage.getItem("accessToken");
        if (!token) throw new Error("Token is missing. Please log in.");
        const response = await axios.get(`/api/observationreports`, {
          headers: { Authorization: `Bearer ${token}` },
        });
        this.reports = response.data.map((report) => ({
          id: report.id,
          user: `${report.first_name} ${report.last_name}`,
          report_date: report.report_date,
          location: report.location,
        }));
        console.log("Headers:", this.headers);
      } catch (error) {
        console.error("Error fetching observation reports:", error.message);
      }
    },
    mounted() {
    console.log("Headers array:", this.headers); // Debugging headers array
    this.fetchReports();
  },
};
</script>

Despite these attempts, the headers remain invisible. Does anyone have suggestions on how to properly render header slots in Vuetify 3? Any insights or guidance would be greatly appreciated.