Change style active v-autocomplete

Question

How i can change style (border color) of v-autocomplete if at least one item is selected? Now style is changed (blue) if focus is on the field, but become default (grey) if item is selected and focus is not on the field. I need to stay blue border after removing focus I try to change css but without success

.v-label .v-label--active .theme--light {
  color: green  !important;
  border: 1px solid red !important;
}

<v-autocomplete
  dense
  v-model="filtered"
  :items="filters"
  :menu-props="{ maxHeight: '200' }"
  label="Filter"
  multiple
  outlined
  class="mr-md-1"
  @change="fetchFilters"
>
 <template v-slot:selection="{ item, index }">
    <v-chip text-color="grey darken-4" class="indigo lighten-5">
      <span>{{ item }}</span>
    </v-chip>
  </template> 
</v-autocomplete>

Answer 1

No additional CSS is required. You could add classes as a Vue class binding:

:class="{'v-input--is-focused primary--text' : filtered.length}"

Using v-input--is-focused primary--text classes will be sufficient, so your autocomplete will look like:

<v-autocomplete
  dense
  v-model="filtered"
  :items="filters"
  :menu-props="{ maxHeight: '200' }"
  :class="{'v-input--is-focused primary--text' : filtered.length}"
  label="Filter"
  multiple
  outlined
  class="mr-md-1"
  @change="fetchFilters"
>

This code is just checking if any items are present in the filtered array.