Vue JS event listeners don’t work and vanilla work ( composition api+ script setup )

Problem: I created a custom component that works as a searchable selection which via vue’s dom event handlers (@input, @focus, watch) detects client input and performs the search on the server.

My component works perfectly (maybe it could be perfected) on all devices except my phone (Xiamo Redmi 12) in which I use a custom keyboard for convenience. i thought that was the problem instead not.
Trying to detect the input with a vanilla javascript eventListener works while with vue handlers, the input is detected only when I ‘unselect’ the input.

<template>
<div ref="inputContainer" class="input-select-container" >
    <label v-if="label">{{ label }}</label>
    <input 
      v-model="model" 
      :type 
      id="search-input"
      :placeholder 
      :required="required"
      @focus="handleShowList"  
      @input="handleShowList"
      autocomplete="off"
      :class="class"
    />
    <div class="input-select-list" v-if="insideList">
      <ul v-if="showList" ref="selectList">
        <slot></slot>
      </ul>
    </div>
  </div>

</template>

<script setup>
  import { ref, onUnmounted, onMounted, watch } from 'vue';
  

  const model     = defineModel();
  const emits     = defineEmits(['show-list']);

  const props     = defineProps({
    type: {
      type: String,
      default: 'search'
    },
    id: {
      type: String,
      default: 'input'
    },
    label: {
      type: String,
      default: null
    },
    placeholder: {
      type: String,
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    },
    class: {
      type: String,
      default: ''
    },
    insideList: {
      type: Boolean,
      default: true
    }
  });

  const showList        = ref(false);
  const inputContainer  = ref(null);
  const selectList      = ref(null);


  function handleClickOutside(event) {
    if (inputContainer.value && !inputContainer.value.contains(event.target)) {
      handleHideList();
    }
  }

  function handleShowList(){
    showList.value = true;
  }

  function handleHideList(){
    showList.value = false;
  }
  //not work
  watch(showList, (value) => {
    emits('show-list', value);
  });
  //not work
  watch(model, (newValue, oldValue) => {
    console.log('Input value changed:', newValue); // Log per debug
    showList.value = true; // Mostra la lista ogni volta che l'input cambia
  });

  

  onMounted(() => {
    document.addEventListener('click', handleClickOutside);
    //WORK
    document.getElementById('search-input').addEventListener('input', function(){
      console.log('Input value changed:', this.value);
    });
  });

  onUnmounted(() => {
    document.removeEventListener('click', handleClickOutside);
  });

  defineExpose({
    handleHideList
  });


</script>