[Vuejs]-Search functionality in v-menu in vuetify

Here is the best way to search/filter, select and remove filtered users using v-autocomplete.

<template>
  <v-app>
    <div id="app">
      <v-autocomplete
        v-model="filteredUsers"
        :items="user_names"
        filled
        chips
        color="blue-grey lighten-2"
        label="Select"
        item-text="name"
        item-value="name"
        hide-selected
        multiple
      >
        <template v-slot:selection="data">
          <v-chip
            v-bind="data.attrs"
            :input-value="data.selected"
            close
            @click="data.select"
            @click:close="remove(data.item)"
          >
            {{ data.item.name }}
          </v-chip>
        </template>
        <template v-slot:item="data">
          <template>
            <v-list-item-content>
              <v-list-item-title v-html="data.item.name"></v-list-item-title>
            </v-list-item-content>
          </template>
        </template>
      </v-autocomplete>
    </div>
  </v-app>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    user_names: [{ name: "abc" }, { name: "def" }, { name: "xyz" }],
    filteredUsers: [],
  }),
  methods: {
    //to remove users which a user wants
    remove(item) {
      //find index of user by name
      const index = this.filteredUsers.indexOf(item.name);
      //if user find then remove from selected users array
      if (index >= 0) this.filteredUsers.splice(index, 1);
    },
  },
};
</script>