Uppdating typescript tuff to allow it t build

frontend/src/vues/GameList.vue

@@ -47,20 +47,22 @@
 </style>
 
 <script setup lang="ts">
+import { Game } from '../types'
 import GameTable from './GameTable.vue'
 import { onMounted, watch, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import axios from 'axios'
 
 const route = useRoute()
 const router = useRouter()
 
-const games = ref({})
+const games = ref<Game[]>([])
 let page = ref(1)
 const pageCount = ref(1)
 
 let count = 10
 
-const filtervalue = ref('')
+const filtervalue = ref<string>('')
 
 async function loadData() {
   const response = await axios.post('/api/game', {
@@ -87,14 +89,14 @@ watch(route, (newValue, oldValue) => {
   }
 
   if (route.query.filter) {
-    filtervalue.value = route.query.filter
+    filtervalue.value = route.query.filter.toString()
   }
   loadData()
 })
 
-let debounce = null
-watch(filtervalue, (newFilter, oldFilter) => {
-  debounce = clearTimeout(debounce)
+let debounce: ReturnType<typeof setTimeout>
+watch(filtervalue, (newFilter: string, oldFilter: string) => {
+  clearTimeout(debounce)
   debounce = setTimeout(() => {
     router.replace({ query: { page: route.query.page, filter: newFilter } })
   }, 500)
@@ -108,7 +110,7 @@ onMounted(async () => {
     page.value = Number(route.query.page)
   }
   if (route.query.filter) {
-    filtervalue.value = route.query.filter
+    filtervalue.value = route.query.filter.toString()
   }
   loadData()
 })