Laravel/Inertia/Vuejs

I'm very new to the concept of this type of development (although not new to development itself). I've created an app which uses a sqlite database. The database is seeded with data. I have for the time being retained the standard laravel welcome page but added my own link to a new page to it just to check that that works, which it does.

On that new page i added a simple string just to confirm I was there and then a table into which I want to display some data from the database. I am definitely close, frustratingly so , but still nothing is displayed.

There is a model RescueCentre

I have the following controller (abreviated deliberately):

namespace App\Http\Controllers;
use App\Models\RescueCentre;
use Illuminate\Http\Request;
use Inertia\Inertia;

class RescueCentreController extends Controller
{
    public function index()
    {

        return Inertia::render(RescueCentre::all());
    }
}

I have a route for it

Route::get('rescuecentres',[\App\Http\Controllers\RescueCentreController::class, 'index'])
    ->name('rescuecentres');

and the finally in the folder located at js/Pages/RescuesCentres the following Index.vue

<script setup>
import { Head, Link } from '@inertiajs/vue3';


    defineProps: {
        rescuecentres: Object
    }

</script>

<template>
     <div>Welcome to the Index page for rescue centres</div>

    <div class="flex flex-col">
        <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                    <table class="min-w-full divide-y divide-gray-200">
                        <tbody class="bg-white divide-y divide-gray-200">
                        <tr v-for="centre in rescuecentres" :key="centre.id">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div>
                                        <div class="text-sm font-medium text-gray-900">
                                            {{ centre.name }}
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<!--                                <Link :href="`/centres/${centre.id}/edit`" class="text-indigo-600 hover:text-indigo-900">-->
<!--                                    Edit-->
<!--                                </Link>-->
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</template>

If I click on the link I placed on the welcome page I get taken to the index page I should but it throws the following error:

index.js:4 Uncaught (in promise) Error: Page not found: ./Pages/[{"id":1,"name":"Evanston Animal Rescue Centre","location":"Evanston","created_at":"2023-12-20T12:57:52.000000Z","updated_at":"2023-12-20T12:57:52.000000Z"},{"id":2,"name":"Samuelbury Animal Rescue Centre","location":"Samuelbury","created_at":"2023-12-20T12:57:52.000000Z","updated_at":"2023-12-20T12:57:52.000000Z"},{"id":3,"name":"Port Harley Animal Rescue Centre","location":"Port Harley","created_at":"2023-12-20T12:57:52.000000Z","updated_at":"2023-12-20T12:57:52.000000Z"},{"id":4,"name":"Port Ross Animal Rescue Centre","location":"Port Ross","created_at":"2023-12-20T12:57:52.000000Z","updated_at":"2023-12-20T12:57:52.000000Z"},{"id":5,"name":"Cameronport Animal Rescue Centre","location":"Cameronport","created_at":"2023-12-20T12:57:52.000000Z","updated_at":"2023-12-20T12:57:52.000000Z"},{"id":6,"name":"East Sophieshire Animal Rescue Centre","location":"East Sophieshire","created_at":"2023-12-20T12:57:52.000000Z","updated_at":"2023-12-20T12:57:52.000000Z"},{"id":7,"name":"Kennedybury Animal Rescue Centre","location":"Kennedybury","created_at":"2023-12-20T12:57:52.000000Z","updated_at":"2023-12-20T12:57:52.000000Z"},{"id":8,"name":"Josephshire Animal Rescue Centre","location":"Josephshire","created_at":"2023-12-20T12:57:52.000000Z","updated_at":"2023-12-20T12:57:52.000000Z"},{"id":9,"name":"New Jackbury Animal Rescue Centre","location":"New Jackbury","created_at":"2023-12-20T12:57:52.000000Z","updated_at":"2023-12-20T12:57:52.000000Z"},{"id":10,"name":"Lake Patricia Animal Rescue Centre","location":"Lake Patricia","created_at":"2023-12-20T12:57:52.000000Z","updated_at":"2023-12-20T12:57:52.000000Z"}].vue at resolvePageComponent (index.js:4:15) at resolve (app.js:13:24) at r (createInertiaApp.ts:34:54) at j2 (createInertiaApp.ts:38:24) at app.js:11:1

At first I thought that that was caused by the <Link> in the template but even after I commented that out it's still there.

Clearly I'm getting data to the page but I have no idea what's going on after that.

I would be really grateful if someone could explain to me just what it is that I am doing wrong.