我正在创建一个待办事项网络应用程序。我已成功获取所有待办事项列表项并将其显示在我的主页上。 当我尝试仅获取一篇文章并显示它时，问题就出现了，它返回 hook is not a function 错误。

我在服务器端使用 laravel，在客户端使用 vite。

下面是我的 api.php 路由

get('/user', function (Request $request) {
    return $request->user();
});


Route::get('/todos', TodosController::class);
Route::get('/todos/{todo:uuid}', TodoController::class);

在第三条路线中，我使用 uuid 来获取单个帖子并显示它。在服务器端正确显示

下面分别是我的 TodoController.php 和 TodoResource。

TodoResource.php
 $this->uuid,
            'name' => $this->name,
            'completed' => $this->completed,
            'completed_at' => $this->completed_at,
        ];
    }
}
我已经使用 axios 在客户端服务器端获取了该帖子。以下是 useTodos.js 的代码
import { ref } from 'vue'

import axios from 'axios'


export default function useTodos() {
    const todos = ref([])
    const todo = ref([])


    const fetchTodos = async () => {
        let response = await axios.get('/api/todos')
        todos.value = response.data.data
    }


    const fetchTodo = async (uuid) => {
        let response = await axios.get(`/api/todos/${uuid}`)
        console.log(response)
        todo.value = response.data.data
    }


    return {
        todos,
        fetchTodos,
        todo,
        fetchTodo
    }
}
下面是在客户端-服务器端显示单个帖子的页面



我的路由器页面
import { createRouter, createWebHistory } from 'vue-router'

import Home from '../pages/Home.vue'
import Todo from '../pages/Todo.vue'

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/todos/:uuid',
        name: 'todo',
        component: Todo,
        props: true
    }
]

export default createRouter({
    history: createWebHistory(),
    routes
})
我试图找到解决方案，解释为什么当我尝试获取单个帖子时，它带来的钩子不是一个函数。
有人可以帮我解决这个问题吗？