Inertia router preserveState doesn't work

I tried to create a server-side filter, but when I use the filter, my page reloads and my checkbox is no longer checked, even though the result is what I'm expecting.

import MatchCard from "@/Components/MatchCard.vue";
import Pagination from "@/Components/Pagination.vue";
import FilterSide from "@/Components/FilterSide.vue";
import MainLayout from "@/Layouts/MainLayout.vue";
import { Head, router } from "@inertiajs/vue3";
import { ref, computed, watch } from "vue";

const equipesFilter = ref([]);
const props = defineProps(["rencontres"]);

const handleCheckboxFilter = (filter: number) => {
  if (equipesFilter.value.includes(filter)) {
    return equipesFilter.value.splice(equipesFilter.value.indexOf(filter), 1);
  } else {
    return equipesFilter.value.push(filter);
  }
};

watch(equipesFilter.value, (value) => {
  router.get(
    "/matchs",
    { equipes: value },
    { preserveState: true, replace: true, preserveScroll: true }
  );
});

My backend

    $RawRencontres = Rencontre::whereDate('date', '>=', now())
        ->orderBy('date')
        ->when($request->input('equipes'), function (Builder $query, $equipes) {
            $query->whereHas('equipes', function (Builder $subquery) use ($equipes) {
                $subquery->whereIn('equipe_id', $equipes);
            });
        })
        ->paginate(10)
        ->withQueryString();
    $rencontres = RencontreResource::collection($RawRencontres);
    return Inertia::render('matchs/ListeMatchs', [
        'rencontres' => $rencontres,
    ]);