remove global component references from docs (#862)

docs/.vuepress/components/ClearButtonOverride.vue

@@ -1,24 +1,18 @@
 <template>
   <div>
     <v-select
-        :options="['Canada', 'United States']"
-        :components="{Deselect}"
+            :options="['Canada', 'United States']"
+            :components="{Deselect}"
     />
   </div>
 </template>
 
 <script>
-import Vue from 'vue';
-
 export default {
-  computed: {
-    Deselect () {
-      return Vue.component('Deselect', {
-        render (createElement) {
-          return createElement('button', 'Clear');
-        },
-      });
+  data: () => ({
+    Deselect: {
+      render: createElement => createElement('button', 'Clear'),
     },
-  },
+  }),
 };
 </script>

docs/.vuepress/components/CustomComponentRegistration.vue

@@ -1,25 +1,21 @@
 <template>
-  <custom-select :options="['Vue.js', 'React', 'Angular']" />
+  <v-select
+          :options="['Vue.js', 'React', 'Angular']"
+          :components="components"
+  />
 </template>
 
 <script>
-import Vue from 'vue';
-import vSelect from '../../../src/components/Select';
-
-const components = {
-  Deselect: Vue.component('Deselect', {
-    render: (createElement) => createElement('button', '❌'),
-  }),
-  OpenIndicator: Vue.component('OpenIndicator', {
-    render: (createElement) => createElement('span', '🔽'),
+export default {
+  data: () => ({
+    components: {
+      Deselect: {
+        render: createElement => createElement('button', '❌'),
+      },
+      OpenIndicator: {
+        render: createElement => createElement('span', '🔽'),
+      },
+    },
   }),
 };
-
-const mySelect = {...vSelect};
-
-mySelect.props.components.default = () => components;
-
-export default {
-  components: {'custom-select': mySelect}
-}
 </script>

docs/.vuepress/components/OpenIndicatorOverride.vue

@@ -1,29 +1,21 @@
 <template>
   <div>
     <v-select
-        multiple
-        v-model="selected"
-        :options="['Canada', 'United States']"
-        :components="{OpenIndicator}"
+            multiple
+            v-model="selected"
+            :options="['Canada', 'United States']"
+            :components="{OpenIndicator}"
     />
   </div>
 </template>
 
 <script>
-import Vue from 'vue';
-
 export default {
   data: () => ({
-    selected: ['Canada']
-  }),
-  computed: {
-    OpenIndicator () {
-      return Vue.component('OpenIndicator', {
-        render (createElement) {
-          return createElement('i', '🤘🏻');
-        },
-      });
+    selected: ['Canada'],
+    OpenIndicator: {
+      render: createElement => createElement('span', {class: {'toggle': true}}),
     },
-  },
+  }),
 };
 </script>

docs/guide/components.md

@@ -19,15 +19,13 @@ a simple `<button>Clear</button>` instead.
 ``` 
 
 ```js
-computed: {
-  Deselect() {
-    return Vue.component('Deselect', {
-      render (createElement) {
-        return createElement('button', 'Clear')
-      }
-    })
-  }
-}
+export default {
+  data: () => ({
+    Deselect: {
+      render: createElement => createElement('button', 'Clear'),
+    },
+  }),
+};
 ```
 
 <ClearButtonOverride />
@@ -45,20 +43,19 @@ based on whether the dropdown is open or closed.
 <v-select :components="{OpenIndicator}" />
 ```
 ```js
-computed: {
-  OpenIndicator () {
-    return Vue.component('OpenIndicator', {
-      render (createElement) {
-        return createElement('button', '🤘🏻');
-      },
-    });
-  },
-},
+export default {
+  data: () => ({
+    selected: ['Canada'],
+    OpenIndicator: {
+      render: createElement => createElement('span', {class: {'toggle': true}}),
+    },
+  }),
+};
 ```
 
 <OpenIndicatorOverride />
 
-## Setting at Registration
+## 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.
@@ -67,21 +64,15 @@ only having to set the implementation once, you can do so when registering Vue S
 import Vue from 'vue';
 import vSelect from 'vue-select';
 
-/**
-* Create custom components to override defaults.
-* @type {{OpenIndicator: *, Deselect: *}}
-*/
-const components = {
-  Deselect: Vue.component('Deselect', {
-    render: (createElement) => createElement('button', '❌'),
-  }),
-  OpenIndicator: Vue.component('OpenIndicator', {
-    render: (createElement) => createElement('span', '🔽'),
-  }),
-};
-
 // Set the components prop default to return our fresh components 
-vSelect.props.components.default = () => components;
+vSelect.props.components.default = () => ({
+  Deselect: {
+    render: createElement => createElement('button', '❌'),
+  },
+  OpenIndicator: {
+    render: createElement => createElement('span', '🔽'),
+  },
+});
 
 // Register the component
 Vue.component(vSelect)