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>