Defalut value of a Select after update

Hi,

I would like to force the default value of one of my select after an update from the changing text in a input

Here the code of my select template:

    <template>
        <div class="input-group group-sm mb-2">
            <span class="input-group-text" v-html="label"></span>
            <select class="form-control" value="" @change="onChanged($event.target.value)">
                <option disabled value="">Please select one</option>
                <option v-for="option in options.data" :value="option.id" :key="option.id" v-html="option.lib"/>
                <option disabled value="">Please select one</option>
            </select>
         </div>
    </template>

and a parts of Js code for this template:

    onChanged(value) {
                this.$emit('update:currentId', value)
            }, 

Now, my use of my template (with another template to get input value):

    <text-field label="Search" v-model:field="temp" />
    <select-field
      label="Selection"
      :options="mydb"
      v-model:currentId="currentId"
    />

and a part of JS code:

    setup() {
    const mydb = reactive({
      data: [],
    });

    let temp = ref("");
    watch(temp, (newVal) => {
      var query = `SELECT * FROM CSV('./support/bdd.csv', {separator:";"}) WHERE lib LIKE "%${newVal}%"`;
      alasql
        .promise(query)
        .then((data) => {
          mydb.data = data;
        })
        .catch((err) => console.log("Error:", err));
    });

This code works. But when I change the input value, the default text is the first option of my new options list and I would like that is “Please select one”.

Another feature that might help me, could be “to active” a slot when select is updated, because here with this code “onChanged(value)” is not launched (so how can I launch this slot ?).

I hope I was clear :).

Thank in advance for your help & Take care of you.

Bye.
Charlie.