v-data-table-server not loading items | Vuetify & Vue 3

I’ve configured a server where I fetch data from an endpoint.
This data has been printed in a v-table component and working perfectly, but I’m having issues with v-data-table-server component.
There’s something wrong and I can’t figure out what it is.

<template>
  <v-container>
    <div class="d-flex mb-8">
      <div class="flex-1-1 mr-2">
        <h1 class="text-h4">Fieldeas Demo</h1>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
      <div class="w-100" style="max-width:240px">
        <v-select
          :items="fetchOptions"
          v-model="selectedFetchOption"
          label="Base de datos"
          hide-details="auto"
          @update:modelValue="fetchData"
        ></v-select>
      </div>
    </div>
    <div class="d-flex align-center v-row mb-2 w-50">
      <div class="v-col">
        <v-text-field
          v-model="input_filter"
          hide-details="auto"
          label="Filtro"
          @update:modelValue="fetchData"
        ></v-text-field>
      </div>
      <div class="v-col">
        <v-text-field
          v-model="input_year"
          hide-details="auto"
          label="Año"
          type="number"
          hide-spin-buttons
          @update:modelValue="fetchData"
        ></v-text-field>
      </div>
    </div>
    <div>
      <v-alert v-if="error" type="error">{{ error }}</v-alert>
      <v-data-table-server
        v-if="data"
        v-model:items-per-page="itemsPerPage"
        :headers="data.fields"
        :items="data.rows"
        :items-length="data.rowCount"
        loading-text="Cargando... Por favor espera"
        loading
      >
      <template v-slot:headers="{ headers }">
        <tr>
          <th v-for="(header, index) in headers" :key="index">{{ header.name }}</th>
        </tr>
      </template>
      <template v-slot:tbody="{ items }">
        <tr v-for="(item, index) in items" :key="index">
          <td v-for="(value, i) in item" :key="i">{{ value }}</td>
        </tr>
      </template>
      </v-data-table-server>
    </div>
  </v-container>
</template>

<script>
  import { toRaw } from 'vue';
  import { useFetch } from '@/hooks/useFetch'

  export default {
    data() {
      return {
        data: null,
        error: null,
        loading: false,
        fetchOptions: [
          'fieldeas_tracktrace_pre',
          'gaa_report',
        ],
        selectedFetchOption: 'fieldeas_tracktrace_pre',
        sqlFile: 'test',
        input_filter: null,
        input_year: null,
        itemsPerPage: 10,
      }
    },
    async created() {
      await this.fetchData()
      console.log(this.data)
      console.log(toRaw(this.data))
    },
    methods: {
      async fetchData() {
        let url = `http://localhost:3000/api/queries/${this.selectedFetchOption}/sql/${this.sqlFile}`
        const params = []

        if (this.input_filter) params.push(`content_filter=${this.input_filter}`)
        if (this.input_year) params.push(`year=${this.input_year}`);
        if (params.length > 0) url += `?${params.join('&')}`

        const { data, error, loading } = await useFetch(url);

        this.data = data
        this.error = error
        this.loading = loading
      },
    },
  }
</script>

This is a screenshot of the data object

data object image