How can I change the autocomplete input value from outside the component?

Question

I'm working on a project that use the package @trevoreyre/autocomplete-vue (v2.4). It's a laravel 7.3 project using Vue 2.6

I have an autocomplete input in a Vue component :

<label for="model_id" class="control-label required">{{label.model}}</label>
<autocomplete 
    ref="model"
    required
    :search="onSearchModel"
    :get-result-value="getResultValue"
    :defaultValue="modelName"
    :autoSelect="true"
    @submit="onSelect"
    @keydown="keyPress"
    ><template v-slot:result="{ result, props }">
        <li v-bind="props" class="autocomplete-result" >
            <span class="autocomplete-mini-img"><img :src="result.cover" alt=""></span>
            <span class="autocomplete-mini-name">{{ result.name }}</span>
        </li>
    </template>
</autocomplete>
<input type="hidden" :name="'model_id'" v-model="modelSelected" required @input="$emit('input', $event.target.value)">

and a widget list behind :

<div class="widget-list">
    <template v-for="(scp) in modelsPreview">
    <section class="widget-element widget-cover">
        <header class="widget-header widget-header-primary-dark ">
            <a @click="onSelect(scp, 'prw')" class="widget-header-title-icon" style="cursor:pointer">
                <i class="icon icon-settings-brightness"></i>
                <h2>{{scp.name}}</h2>
            </a>
        </header>
        <section class="widget-content">
            <div class="schema-cover-wrapper">
                <a :href="scp.links.show">
                    <img class="schema-cover" :src="scp.cover ? scp.cover.url: '/img/error.jpg' " alt="">
                </a>
            </div>
            <div class="schema-action">
                <a :href="scp.links.show" class="btn-mini">
                    <i class="icon icon-info-outline"></i>
                </a>
            </div>
        </section>
    </section>
    </template>
</div>

I wanted, in addition of the actual autocomplete feature, change the autocomplete input value when clicking on a widget element : @click="onSelect(scp, 'prw')"

So I change the onSelect method to deal with :

        onSelect:function(value, from = null){

            if(from !== null) {
                this.modelSelected = value._id;
            } else {
                this.modelSelected = value.id;
            }
            this.modelName = value.name;
            this.cover = value.cover;
        },

I can see that the modelSelected and modelName properties changed correctly but I want also changing the autocomplete input value to display the modelName of the widget I've selected. It seems that the autocomplete input doesn't update with the modelName properties which is its defaut value : :defaultValue="modelName".

Do you know how can I update this display without refreshing the page?

I'm not used to using vue so please be lenient ;)