My vue3 ref const is being reset as soon as I assign a value - vuejs3

Question

I'm creating an app in Laravel 9 using Vue 3. I have a list that I would like to filter, based on the selection of a dropdown. To ensure the continuity of the selection, I store the value in a ref (gamekk). My code is working to a point: gamekk is updated with the selected value, my computed list filters on the value of gamekk, and the list is displayed. It's only there momentarily, though. Immediately after, gamekk is reset and the list disappears. I can confirm this by displaying gamekk in my page - the value appears then disappears. I don't reference gamekk anywhere else (I added the 'kk' to be sure').
My script is:
<script setup>
import AuthenticatedLayout from '#/Layouts/AuthenticatedLayout.vue';
import { Head, Link, usePage } from '#inertiajs/inertia-vue3';
import PrimaryButton from '#/Components/PrimaryButton.vue';
import Dropdown from '#/Components/Dropdown.vue';
import DropdownLink from '#/Components/DropdownLink.vue';
import { Inertia } from '#inertiajs/inertia';
import {ref, reactive, computed} from 'vue';
const props = defineProps({
categories: {
type: Object,
default: () => ({}),
},
games: {
type: Object,
default: () => ({})
},
languages: {
type: Object,
default: () => ({})
}
});
const gamekk = ref();
const langFil = ref();
const cats = computed( () => {
return usePage().props.value.categories.filter(cat =>
(cat.game == gamekk.value)
);
});
function filterCats(filter, name) {
switch(filter) {
case 'game':
gamekk.value = name;
break;
case 'language':
langFil.value = name;
break;
}
}
</script>
I filter the list using:
<div class="flex">
Game
<div class="hidden sm:flex sm:items-center sm:ml-6">
<!-- Settings Dropdown -->
<div class="ml-3 relative">
<Dropdown align="right" width="48">
<template #trigger>
<span class="inline-flex rounded-md">
<button type="button" class="inline-flex items-center px-3 border border-transparent text-lg leading-4 font-medium rounded-md text-gray-700 hover:text-gray-500 focus:outline-none transition ease-in-out duration-150">
<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</span>
</template>
<template #content>
<DropdownLink v-for="game in $page.props.games" :key="game.id" #click="filterCats('game', game.name)">{{ game.name }}</DropdownLink>
</template>
</Dropdown>
</div>
</div>
</div>
I've used refs in this way before without problem. What am I missing that might reset the value automatically?