vue-select/docs/guide/components.md

Vue Select utilizes child components throughout, and exposes an API to overwrite these components with your own, using the components {Object} prop. When implementing the components prop in your code, Vue Select merge it's default components with any keys that you set in the object.

Your object will be merged with the object that is exported below:

<<< @/src/components/childComponents.js{4-7}

You can override the value of any of these keys with your own components.

Deselect

You may wish to roll your own deselect button. Deselect is used within tags on multiple selects, and serves as the clear button for single selects. Maybe you just want to use a simple <button>Clear</button> instead.

<v-select :components="{Deselect}" />

export default {
  data: () => ({
    Deselect: {
      render: createElement => createElement('span', '❌'),
    },
  }),
};

The same approach applies for multiple selects:

OpenIndicator

The OpenIndicator component is the 'caret' used within the component that adjusts orientation based on whether the dropdown is open or closed.

<v-select :components="{OpenIndicator}" />

export default {
  data: () => ({
    selected: ['Canada'],
    OpenIndicator: {
      render: createElement => createElement('span', {class: {'toggle': true}}),
    },
  }),
};

Setting Globally at Registration

If you want to all instances of Vue Select to use your custom components throughout your app, while only having to set the implementation once, you can do so when registering Vue Select as a component.

import Vue from 'vue';
import vSelect from 'vue-select';

// Set the components prop default to return our fresh components 
vSelect.props.components.default = () => ({
  Deselect: {
    render: createElement => createElement('span', '❌'),
  },
  OpenIndicator: {
    render: createElement => createElement('span', '🔽'),
  },
});

// Register the component
Vue.component(vSelect)