Need help changing page on v-data-table-server from "code" when page route changes

[bzuidgeest]

I'm trying to create a app that displays data from the server. The route contains the name of a filter to apply to the data. When the route changes I need to return the table to page 1 as the new selections might not have page X.

I have bound
:items-per-page="itemsPerPage"
:page="page"
on the table I can use itemsPerPage to set the initial number of items, but if I change it using the dropdown the new value is not communicated back to the reference. Trying to start at any other page then page 1 using :page also fails completely.

As I am new to vue and vuetify I am no doubt doing something wrong. Any help is appreciated.

<template>
    <v-app id="inspire">
        <v-navigation-drawer permanent expand-on-hover rail>
                <filterMenu />
        </v-navigation-drawer>
        <v-main>
            <v-container fluid>
                <v-row>
                    <v-col>

                        <v-data-table-server :headers="headers"
                                             :items="serverItems"
                                             :items-length="totalItems"
                                             :loading="loading"
                                             item-value="Id"
                                             @update:options="loadItems"
                                             :items-per-page="itemsPerPage"
                                             :page="page"
                                             ref="myTable"></v-data-table-server>
                    </v-col>
                </v-row>
            </v-container>
        </v-main>
    </v-app>
</template>

<script setup lang="ts">
    import { ref, watch } from 'vue'
    import FilterMenu from './components/FilterMenu.vue'
    import { useRoute, useRouter } from 'vue-router'

    const router = useRouter()
    const route = useRoute()

    const myTable = ref(null)

   
    const loading = ref(false);
    const itemsPerPage = ref(6);
    const page = ref(2);

    const headers = [
        {
            title: 'Platform',
            align: 'start',
            sortable: false,
            key: 'Platform',
        },
        { title: 'Title', key: 'Title', align: 'start' },
        { title: 'Release Date', key: 'Release Date', align: 'start' },
        { title: 'Publisher', key: 'Publisher', align: 'start' },
        { title: 'Developer', key: 'Developer', align: 'start' }
    ];
    const serverItems = ref([]);
    const totalItems = ref(0);

    watch(() => route.params.filterId, () => {
        page.value = 1;
        //let x = itemsPerPage.value;
        loadItems({
            page: 1,
            itemsPerPage: itemsPerPage.value,
            sortBy: []
        });
    }, { immediate: false })

    async function loadItems ({ page, itemsPerPage, sortBy }) {
        loading.value = true;

        let filterId: string = "filterId" in route.params ? route.params.filterId.toString() : "";

        fetch(`https://localhost:7201/api/Data/Filter/${filterId}?subFilter=%20&page=${page}&pageSize=${itemsPerPage}`, {
            method: 'Get',
            headers: {
   ]             'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        }).then((response) => {
            return response.json();
        }).then((data) => {
            serverItems.value = data.items;
            totalItems.value = data.totalItems;
            loading.value = false;
        }).catch(error => {
            console.error(error);
        });


    }
</script>