V-автозаполнение форматирования / поведение размытия

Я хочу использовать значки разных цветов в своем v-autocomplete. Я отформатировал как v-slot:item, так и v-slot:selection соответственно.

<v-autocomplete :items = "itemList" v-model = "selectedValue">
    <template v-slot:selection = "{ props, item }">
        <v-icon size = "small" :color = "item.raw.color" class = "mr-3 pt-1">mdi-circle</v-icon>
        {{item.title}}            
    </template>
    <template v-slot:item = "{ props, item }">
        <v-list-item v-bind = "props">
            <template v-slot:prepend>
                <v-icon :color = "item.raw.color" class = "mr-3">mdi-circle</v-icon>
            </template>                
        </v-list-item>
    </template>
</v-autocomplete>

https://codepen.io/drhouse82/pen/yLjqZeN

Когда я выбираю элемент из списка выбора, раскрывающийся список закрывается, а в поле ввода отображается только текст. Когда я затем щелкаю за пределами автозаполнения (чтобы размыть его), форматирование настраивается так, как предполагалось.

Что я могу сделать, чтобы форматирование (со значком) отображалось сразу после выбора элемента? Возможно ли автоматическое размытие при изменении значения модели?