diff --git a/doc/checkbox/BasicDoc.vue b/doc/checkbox/BasicDoc.vue
index f9f32bad2..dfce32a65 100644
--- a/doc/checkbox/BasicDoc.vue
+++ b/doc/checkbox/BasicDoc.vue
@@ -39,7 +39,7 @@ export default {
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
 
 const checked = ref(false);
diff --git a/doc/checkbox/DisabledDoc.vue b/doc/checkbox/DisabledDoc.vue
index 4767c28aa..8b1c8325a 100644
--- a/doc/checkbox/DisabledDoc.vue
+++ b/doc/checkbox/DisabledDoc.vue
@@ -39,7 +39,7 @@ export default {
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
 
 const checked = ref(false);
diff --git a/doc/checkbox/GroupDoc.vue b/doc/checkbox/GroupDoc.vue
index 4277c6c27..f17e9f5b8 100644
--- a/doc/checkbox/GroupDoc.vue
+++ b/doc/checkbox/GroupDoc.vue
@@ -101,7 +101,7 @@ export default {
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
 
 const pizza = ref();
diff --git a/doc/checkbox/InvalidDoc.vue b/doc/checkbox/InvalidDoc.vue
index 18198ad90..3b65f51d2 100644
--- a/doc/checkbox/InvalidDoc.vue
+++ b/doc/checkbox/InvalidDoc.vue
@@ -39,7 +39,7 @@ export default {
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
 
 const checked = ref(false);
diff --git a/doc/colorpicker/BasicDoc.vue b/doc/colorpicker/BasicDoc.vue
index 392db6bd8..c004bc8da 100644
--- a/doc/colorpicker/BasicDoc.vue
+++ b/doc/colorpicker/BasicDoc.vue
@@ -39,7 +39,7 @@ export default {
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
 
 const color = ref();
diff --git a/doc/colorpicker/DisabledDoc.vue b/doc/colorpicker/DisabledDoc.vue
index b5660a9cd..5a783e138 100644
--- a/doc/colorpicker/DisabledDoc.vue
+++ b/doc/colorpicker/DisabledDoc.vue
@@ -39,7 +39,7 @@ export default {
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
 
 const color = ref();
diff --git a/doc/colorpicker/FormatDoc.vue b/doc/colorpicker/FormatDoc.vue
index ff423f343..cedcd8f52 100644
--- a/doc/colorpicker/FormatDoc.vue
+++ b/doc/colorpicker/FormatDoc.vue
@@ -87,7 +87,7 @@ export default {
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
 
 const colorHEX = ref('6466f1');
diff --git a/doc/colorpicker/InlineDoc.vue b/doc/colorpicker/InlineDoc.vue
index 4ebfb1cc3..f8738f558 100644
--- a/doc/colorpicker/InlineDoc.vue
+++ b/doc/colorpicker/InlineDoc.vue
@@ -39,7 +39,7 @@ export default {
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
 
 const color = ref();