diff --git a/package.json b/package.json
index 3a10713..4c2c80e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue3-colorpicker",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "main": "dist/index.es.js",
   "types": "dist/types/index.d.ts",
   "author": "aesoper",
diff --git a/packages/common/Board.vue b/packages/common/Board.vue
index e74a68b..8194e2a 100644
--- a/packages/common/Board.vue
+++ b/packages/common/Board.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, getCurrentInstance, reactive, ref } from "vue";
+  import { computed, defineComponent, getCurrentInstance, nextTick, reactive, ref } from "vue";
   import propTypes from "vue-types";
   import { clamp, Color } from "../utils/color";
   import { tryOnMounted, whenever } from "@vueuse/core";
@@ -109,7 +109,9 @@
             },
           });
 
-          updatePosition();
+          nextTick(() => {
+            updatePosition();
+          });
         }
       });
 
diff --git a/public/package.json b/public/package.json
index 90d1551..b225321 100644
--- a/public/package.json
+++ b/public/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue3-colorpicker",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "main": "index.es.js",
   "types": "types/index.d.ts",
   "author": "aesoper",
diff --git a/src/App.vue b/src/App.vue
index 60d2ab8..278a564 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
   <div class="main">
     <div class="color-pickers">
       <ColorPicker v-model:pureColor="color" picker-container="#app" />
-      <ColorPicker v-model:pureColor="color" shape="circle" />
+      <ColorPicker v-model:pureColor="color" shape="circle" pickerType="chrome" />
       <ColorPicker v-model:gradientColor="gradientColor" useType="gradient" />
 
       <div style="position: fixed; bottom: 10px; right: 10px">