How to debounce axios call with Laravel and Vuejs 3?

So I thought that it would be pretty straight forward to use lodash debounce function to delay user input on a axios post call. But I cannot get it to work. I have placed a watcher on the search input, that is called search. And a function to make the post request (searchGames), but for some reason (no errors) I cannot get the function inside debounce to fire.

At first I thought that lodash wasn't installed, but I have tried some other functions, and it seems to be working - so nothing wrong there. I have also tried to wrap the axios call in a debounce function, but still without any luck.

<template>
    <Head title="Welcome" />
    <div>
        <input class="mb-2" type="text" v-model="search" placeholder="game name" @input="debounceSearchGames" autofocus>
        <p>Search {{ search }}</p>
        <p v-for="game in games">
            {{ game.title }}
        </p>
    </div>


</template>

<script>
    import { defineComponent } from 'vue'
    import { Head, Link } from '@inertiajs/inertia-vue3';

    export default defineComponent({
        components: {
            Head,
            Link,
        },

        data(){
            return {
                games: null,
                search: null
            }
        },

        watch: {
            search(){
                _.debounce(() => {
                    this.searchGames(this.search)
                }, 500)
                // this.searchGames(this.search)
            }
        },

        methods: {
            searchGames(string){
                console.log(string)
                axios.post('/games', {
                    title: string
                })
                .then(response => {
                    this.games = response.data
                })
                .catch(error => {
                    console.log(error)
                })
            }
        }
    })
</script>

Im using Laravel 9 with Jetstream and the InertiaJS stack.