parsley/app/javascript/components/AppSearchText.vue

<template>
  <div class="field">
    <div class="control">
      <input type="text" class="input" :placeholder="placeholder" :value="text === null ? '' : text" @input="userUpdateText($event.target.value)">
    </div>
  </div>
</template>

<script setup>

import { ref, watch } from "vue";
import debounce from "lodash/debounce";

const props = defineProps({
  placeholder: {
    required: false,
    type: String,
    default: ""
  }
});

const model = defineModel({ type: String, default: null });
const text = ref(model.value);

watch(model, (val) => { text.value = val; });

const triggerInput = debounce(function() {
      model.value = text.value;
    },
    250,
    { leading: false, trailing: true });

function userUpdateText(newText) {
  if (text.value !== newText) {
    text.value = newText;
    triggerInput();
  }
}

</script>