vue3 watchEffect solicitud de optimización anti-vibración

Código:

<template>
        <div>
            <input type="text" v-model="keyword">
        </div>
</template>
<script>
    import {
    
    
        ref,
        watchEffect
    } from 'vue'
    export default {
    
    
        setup() {
    
    
            let keyword = ref('')
            function getKeyWordLish(val) {
    
    
                return setTimeout(() => {
    
    
                        console.log('val',val)
                        //这里获取keyword，发送请求
                        // $api.getData({
    
    
                        //     keyword:val
                        // })
                    }, 1000)
            }
            watchEffect((onInvalidate ) => {
    
    
               let timer=getKeyWordLish(keyword.value)//再重新生成定时器
               console.log('change',keyword.value)
               onInvalidate (()=>{
    
    //watchEffect里面先执行这个函数，即是清除掉之前的定时器
                   clearTimeout(timer)
               })
            })
          
            return {
    
    
                keyword
            }
        }
    }
</script>

Requisitos: supervisar el contenido de entrada del cuadro de entrada, enviar una solicitud para obtener la lista desplegable de palabras clave, hacer clic en el botón para enviar la solicitud, etc.