diff --git a/docs/.vuepress/components/ClearButtonOverride.vue b/docs/.vuepress/components/ClearButtonOverride.vue
index b9350d6..11b6c58 100644
--- a/docs/.vuepress/components/ClearButtonOverride.vue
+++ b/docs/.vuepress/components/ClearButtonOverride.vue
@@ -11,7 +11,7 @@
 export default {
   data: () => ({
     Deselect: {
-      render: createElement => createElement('button', 'Clear'),
+      render: createElement => createElement('span', '❌'),
     },
   }),
 };
diff --git a/docs/.vuepress/components/CustomComponentRegistration.vue b/docs/.vuepress/components/CustomComponentRegistration.vue
index b086755..7e08e10 100644
--- a/docs/.vuepress/components/CustomComponentRegistration.vue
+++ b/docs/.vuepress/components/CustomComponentRegistration.vue
@@ -1,20 +1,18 @@
 <template>
   <v-select
           :options="['Vue.js', 'React', 'Angular']"
-          :components="components"
+          :components="{Deselect, OpenIndicator}"
   />
 </template>
 
 <script>
 export default {
   data: () => ({
-    components: {
-      Deselect: {
-        render: createElement => createElement('button', '❌'),
-      },
-      OpenIndicator: {
-        render: createElement => createElement('span', '🔽'),
-      },
+    Deselect: {
+      render: createElement => createElement('span', '❌'),
+    },
+    OpenIndicator: {
+      render: createElement => createElement('span', '🔽'),
     },
   }),
 };
diff --git a/docs/.vuepress/components/MultipleClearButtonOverride.vue b/docs/.vuepress/components/MultipleClearButtonOverride.vue
index ad7790b..f547622 100644
--- a/docs/.vuepress/components/MultipleClearButtonOverride.vue
+++ b/docs/.vuepress/components/MultipleClearButtonOverride.vue
@@ -1,29 +1,21 @@
 <template>
   <div>
     <v-select
-        multiple
-        v-model="selected"
-        :options="['Canada', 'United States']"
-        :components="{Deselect}"
+            multiple
+            v-model="selected"
+            :options="['Canada', 'United States']"
+            :components="{Deselect}"
     />
   </div>
 </template>
 
 <script>
-import Vue from 'vue';
-
 export default {
   data: () => ({
-    selected: ['Canada']
-  }),
-  computed: {
-    Deselect () {
-      return Vue.component('Deselect', {
-        render (createElement) {
-          return createElement('button', 'Clear');
-        },
-      });
+    selected: ['Canada'],
+    Deselect: {
+      render: createElement => createElement('span', '❌'),
     },
-  },
+  }),
 };
 </script>
diff --git a/docs/guide/components.md b/docs/guide/components.md
index e84cdae..7720404 100644
--- a/docs/guide/components.md
+++ b/docs/guide/components.md
@@ -22,15 +22,13 @@ a simple `<button>Clear</button>` instead.
 export default {
   data: () => ({
     Deselect: {
-      render: createElement => createElement('button', 'Clear'),
+      render: createElement => createElement('span', '❌'),
     },
   }),
 };
 ```
 
-<ClientOnly>
   <ClearButtonOverride />
-</ClientOnly>
 
 The same approach applies for `multiple` selects:
 
@@ -55,9 +53,7 @@ export default {
 };
 ```
 
-<ClientOnly>
-  <OpenIndicatorOverride />
-</ClientOnly>
+<OpenIndicatorOverride />
 
 ## Setting Globally at Registration
 
@@ -71,7 +67,7 @@ import vSelect from 'vue-select';
 // Set the components prop default to return our fresh components 
 vSelect.props.components.default = () => ({
   Deselect: {
-    render: createElement => createElement('button', '❌'),
+    render: createElement => createElement('span', '❌'),
   },
   OpenIndicator: {
     render: createElement => createElement('span', '🔽'),
@@ -82,7 +78,5 @@ vSelect.props.components.default = () => ({
 Vue.component(vSelect)
 ```
 
-<ClientOnly>
-  <CustomComponentRegistration />
-</ClientOnly>
+<CustomComponentRegistration />