remove global component references from docs (#862)

docs/.vuepress/components/ClearButtonOverride.vue

@@ -1,24 +1,18 @@
 <template>
   <div>
     <v-select
-        :options="['Canada', 'United States']"
+            :options="['Canada', 'United States']"
-        :components="{Deselect}"
+            :components="{Deselect}"
     />
   </div>
 </template>
 
 <script>
-import Vue from 'vue';
-
 export default {
-  computed: {
+  data: () => ({
-    Deselect () {
+    Deselect: {
-      return Vue.component('Deselect', {
+      render: createElement => createElement('button', 'Clear'),
-        render (createElement) {
-          return 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';
+export default {
-import vSelect from '../../../src/components/Select';
+  data: () => ({
-
+    components: {
-const components = {
+      Deselect: {
-  Deselect: Vue.component('Deselect', {
+        render: createElement => createElement('button', '❌'),
-    render: (createElement) => createElement('button', '❌'),
+      },
-  }),
+      OpenIndicator: {
-  OpenIndicator: Vue.component('OpenIndicator', {
+        render: createElement => createElement('span', '🔽'),
-    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
+            multiple
-        v-model="selected"
+            v-model="selected"
-        :options="['Canada', 'United States']"
+            :options="['Canada', 'United States']"
-        :components="{OpenIndicator}"
+            :components="{OpenIndicator}"
     />
   </div>
 </template>
 
 <script>
-import Vue from 'vue';
-
 export default {
   data: () => ({
-    selected: ['Canada']
+    selected: ['Canada'],
-  }),
+    OpenIndicator: {
-  computed: {
+      render: createElement => createElement('span', {class: {'toggle': true}}),
-    OpenIndicator () {
-      return Vue.component('OpenIndicator', {
-        render (createElement) {
-          return createElement('i', '🤘🏻');
-        },
-      });
     },
-  },
+  }),
 };
 </script>

docs/guide/components.md

@@ -19,15 +19,13 @@ a simple `<button>Clear</button>` instead.
 ``` 
 
 ```js
-computed: {
+export default {
-  Deselect() {
+  data: () => ({
-    return Vue.component('Deselect', {
+    Deselect: {
-      render (createElement) {
+      render: createElement => createElement('button', 'Clear'),
-        return createElement('button', 'Clear')
+    },
-      }
+  }),
-    })
+};
-  }
-}
 ```
 
 <ClearButtonOverride />
@@ -45,20 +43,19 @@ based on whether the dropdown is open or closed.
 <v-select :components="{OpenIndicator}" />
 ```
 ```js
-computed: {
+export default {
-  OpenIndicator () {
+  data: () => ({
-    return Vue.component('OpenIndicator', {
+    selected: ['Canada'],
-      render (createElement) {
+    OpenIndicator: {
-        return createElement('button', '🤘🏻');
+      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)