Vue router でコンポーネントが表示されない件についての質問です。

前提

単純なルーティングの話なのですが、詰まってしまったので質問させていただきます。
パスのlocalhost:8080/tasks　にアクセスしたのですが、TaskListComponentが表示されません。
そして何故なのか原因が特定できなかったのですが、path: '/tasks'を path: '/'にかきかえると
localhost:8080においてTaskListComponentが表示されました。

質問は私のコードのどこがおかしいかについてです。
エラー文は
GET http://localhost:8000/tasks 404 (Not Found)　tasks:1
が表示されました。
パスを書き換え、localhost:8080でアクセスするときちんと表示されたということはあとほんの少しというところだと思うのですが最後の部分が全くわからず右往左往しています。
回答のほどよろしくお願いいたします。

以下App.vue, router.js, bootstrap.js,です。
TaskListComponent.vueは省略させていただきます。

router.jsにルーティングに関することを記述しています。

router.js

import { createRouter, createWebHistory } from "vue-router"; import TaskListComponent from "./components/TaskListComponent.vue"; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/tasks', name: 'tasks.list', component: TaskListComponent } ] }) export default router

App.vue

<script setup> import HeaderComponent from "./components/HeaderComponent.vue"; </script> <template> <HeaderComponent /> <router-view></router-view> </template>

bootstrap.js(axiosなどの関係のないモジュールについては省略しております）

import { createApp } from "vue"; import App from "./App.vue"; import router from "./router.js" const app = createApp(App); app.use(router); app.mount("#app");

補足情報（FW/ツールのバージョンなど）

laravel9
ubuntu22
vue3