[Vuejs]-Add Elements to a Searchable Dropdown That Weren't Originally in the Dropdown – Vue

You can use vue-multiselect for the searchable dropdown:

<multiselect
  :options="list"
  v-model="selected"
></multiselect>

…and add some custom code to add the typed color to list when Enter or Return is pressed:

<div @keyup.enter="addColor($event)">
  <multiselect
    :options="list"
    v-model="selected"
    @search-change="typed = $event"
  ></multiselect>
</div>

addColor() {
  if (!this.list.includes(this.typed)) this.list.push(this.typed); // check if inputted color is already in the list; if not, add it; if so, don't
  this.selected = this.typed; // set `selected` to the currently typed color
},

Note that you will have to add the CSS for vue-multiselect, which you can see how to do in the installation instructions here.

Sandbox & Full Code