diff --git a/docs/.vuepress/components/ClearButtonOverride.vue b/docs/.vuepress/components/ClearButtonOverride.vue
index 9c12bdc..b9350d6 100644
--- a/docs/.vuepress/components/ClearButtonOverride.vue
+++ b/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>
diff --git a/docs/.vuepress/components/CustomComponentRegistration.vue b/docs/.vuepress/components/CustomComponentRegistration.vue
index 66f2af1..b086755 100644
--- a/docs/.vuepress/components/CustomComponentRegistration.vue
+++ b/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>
diff --git a/docs/.vuepress/components/OpenIndicatorOverride.vue b/docs/.vuepress/components/OpenIndicatorOverride.vue
index 1257776..8f5b76e 100644
--- a/docs/.vuepress/components/OpenIndicatorOverride.vue
+++ b/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>
diff --git a/docs/guide/components.md b/docs/guide/components.md
index dd97c06..a4929f4 100644
--- a/docs/guide/components.md
+++ b/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)