Problem Statement
Can you create a custom v-model-like behavior (e.g., debounced input)?
Explanation
Wrap the native input in a component and emit update:modelValue on a debounced timer. This decouples UI typing from model updates and avoids heavy computations on every keypress.
Code Solution
SolutionRead Only
<script setup>
import { ref } from 'vue'
const props = defineProps({ modelValue: String, delay: { type: Number, default: 300 } })
const emit = defineEmits(['update:modelValue'])
let t: any
function onInput(e:any){ clearTimeout(t); t = setTimeout(() => emit('update:modelValue', e.target.value), props.delay) }
</script>
<template><input :value="modelValue" @input="onInput" /></template>