Failing to get initial value (Vue 3)

This is my code. It works just fine, except when “restaurantId” has initial value, it doesn’t pre-select the option.

<restaurant-autocomplete v-model="filters.restaurantId" /> //Int

RestaurantAutocomplete.vue:

<template>
    <Multiselect
		    :delay="500"
		    :resolveOnLoad="!!$attrs.modelValue"
		    :options="async (q) => await autocomplete(q)" // [{value: Int, label: String}]
		    :searchable="true"
		    :filterResults="false"
		    :clearOnSearch="true"
		    :clearOnSelect="false"
		    placeholder="Restaurant"
		    :loading="loading"
		    @select="$emit('update:modelValue', $event)"/>
</template>

[adamberecz]

But can you actually see Multiselect’s modelValue prop being set? I don’t think so because attribute inheritance works with non-prop attributes and :modelValue is a prop. So adding :modelValue="modelValue" to multiselect should solve the problem.

Btw generally if you have resolveOnLoad set to true and the resulting async option list contains an item which value equals to the initially set modelValue it will be selected once the async process finishes.

[tljafar]

I used :model-value="default_value" that’s worked for me in Vue 3

But can you actually see Multiselect’s modelValue prop being set? I don’t think so because attribute inheritance works with non-prop attributes and :modelValue is a prop. So adding :modelValue="modelValue" to multiselect should solve the problem.

Btw generally if you have resolveOnLoad set to true and the resulting async option list contains an item which value equals to the initially set modelValue it will be selected once the async process finishes.