Vuetify isFocused slotProp doesn't work when used on v-if

So, I have a code like this

<template>
  <v-autocomplete :items="items" v-model="selectedItems">
    <template #prepend-inner="{ isFocused }">
      <v-icon v-if="isFocused">mdi-magnify</v-icon>
    </template>
  </v-autocomplete>
</template>

This doesn't work. v-icon is always shown no matter the focused state. However the following code

<template>
  <v-autocomplete :items="items" v-model="selectedItems">
    <template #prepend-inner="{ isFocused }">
      <div>{{ isFocused }}</div>
    </template>
  </v-autocomplete>
</template>

...displays true or false correctly, depending on the focused state. What do I do wrong?

This is an example of a known caveat with unwrapping refs in template code, where isFocused is not a top-level property and therefore requires the use of .value. See the Vue documentation for a more thorough explanation and why the {{ }} text interpolation actually works.

To solve your problem though, change the v-if like so:

<v-icon v-if="isFocused.value">mdi-magnify</v-icon>