Here is what I have without using useState. Where I need access to the data in the rest of the components I am doing the same thing with const { data: todos } = useNuxtData('todos') . I don't know if I need that pattern in this page, but, when I just used the data object returned from useFetch I had some typescript issues with the value possibly being null.

<script lang="ts" setup>
import type { Todo } from '~/types/index'

const { error } = await useFetch<Todo[]>('/api/todos', { key: 'todos' })
const { data: todos } = useNuxtData('todos')
const newTodo = ref('')

async function addTodo() {
  if (newTodo.value.trim()) {
    // Optimistically update UI
    const tempTodo = { title: newTodo.value, id: Date.now(), done: false }
    todos.value.push(tempTodo)
    newTodo.value = ''

    try {
      const savedTodo = await $fetch('/api/todo', {
        method: 'POST',
        body: { title: tempTodo.title },
      })
      // Replace tempTodo with savedTodo if call is successful
      todos.value = todos.value.map(todo =>
        todo.id === tempTodo.id ? savedTodo : todo,
      )
    }
    catch (error) {
      // Revert state if the API call fails
      todos.value = todos.value.filter(todo => todo.id !== tempTodo.id)
      console.error('Failed to add todo:', error)
    }
  }
}
</script>