typescript - Rückgabewert mit useFetch der vueuse-Bibliothek angeben

Ich versuche, den Rückgabewert meiner Daten mit der useFetch()-Funktion der vueuse-Bibliothek (nicht der von Nuxt3!) anzugeben

Der Code unten funktioniert, um die Daten von der API zu erhalten, aber der Rückgabewert der Daten (Person) wird nicht korrekt abgeleitet.

<script setup lang="ts">
import { useFetch } from '@vueuse/core'

interface Person {
  id: number
  first_name: string
  last_name: string
}

const url = 'http://localhost:8000/api/persons/1/'

const { isFetching, data: person } = useFetch<Person>(url).get().json()

console.log(person)
</script>

<template>
  <div>
    <div v-if="isFetching">
      <LoadingIndicator />
    </div>
    <div v-else>
      <div v-if="person">
          {{ person.id }}: {{ person.first_name }} {{ person.last_name }}
      </div>
    </div>
  </div>
</template>

Wie Sie unten sehen können, bleibt der Datentyp vom Typ Any. (Ich bewege den Mauszeiger über den Datenwert):

Die Konsolenprotokoll:

Wenn ich den Aufruf von json() überspringe, wird der Typ korrekt abgeleitet und ich habe Code-Completion im Template. Das Objekt wird jedoch nicht mehr als JSON geparst...

Das Konsolenprotokoll: Irgendwelche Ideen, wie man den Typ korrekt ableiten kann? Oder ist das einfach ein Problem meiner IDE?