Vue.js: How to use useDebounceFn from VueUse?

1<script setup>
2import { useDebounceFn } from "@vueuse/core"
3
4function search(query) {
5    console.log("Searching:", query)
6    // API call
7}
8
9const debouncedSearch = useDebounceFn(search, 300)
10</script>
11
12<template>
13    <input @input="debouncedSearch($event.target.value)" />
14</template>