diff --git a/console/packages/components/src/components/dialog/Dialog.vue b/console/packages/components/src/components/dialog/Dialog.vue
index 6494e15a2..247bec2c9 100644
--- a/console/packages/components/src/components/dialog/Dialog.vue
+++ b/console/packages/components/src/components/dialog/Dialog.vue
@@ -8,7 +8,7 @@ import {
   IconForbidLine,
   IconInformation,
 } from "../../icons/icons";
-import { computed, ref } from "vue";
+import { ref, type Component, markRaw, type Raw } from "vue";
 import type { Type } from "@/components/dialog/interface";
 import type { Type as ButtonType } from "@/components/button/interface";
 
@@ -48,25 +48,24 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const icons = {
+const icons: Record<Type, { icon: Raw<Component>; color: string }> = {
   success: {
-    icon: IconCheckboxCircle,
+    icon: markRaw(IconCheckboxCircle),
     color: "green",
   },
   info: {
-    icon: IconInformation,
+    icon: markRaw(IconInformation),
     color: "blue",
   },
   warning: {
-    icon: IconErrorWarning,
+    icon: markRaw(IconErrorWarning),
     color: "orange",
   },
   error: {
-    icon: IconForbidLine,
+    icon: markRaw(IconForbidLine),
     color: "red",
   },
 };
-const icon = computed(() => icons[props.type]);
 
 const loading = ref(false);
 
@@ -108,8 +107,8 @@ const handleClose = () => {
     <div class="flex justify-between items-start py-2 mb-2">
       <div class="flex flex-row items-center gap-3">
         <component
-          :is="icon.icon"
-          :class="`text-${icon.color}-500`"
+          :is="icons[type].icon"
+          :class="`text-${icons[type].color}-500`"
           class="w-6 h-6"
         ></component>
         <div class="text-base text-gray-900 font-bold">{{ title }}</div>
diff --git a/console/packages/components/src/components/toast/Toast.vue b/console/packages/components/src/components/toast/Toast.vue
index cefc9ab81..8b5b49564 100644
--- a/console/packages/components/src/components/toast/Toast.vue
+++ b/console/packages/components/src/components/toast/Toast.vue
@@ -1,6 +1,13 @@
 <script lang="ts" setup>
 import type { Type } from "./interface";
-import { computed, onMounted, ref, watchEffect } from "vue";
+import {
+  onMounted,
+  ref,
+  watchEffect,
+  type Raw,
+  type Component,
+  markRaw,
+} from "vue";
 import {
   IconCheckboxCircle,
   IconErrorWarning,
@@ -36,27 +43,25 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const icons = {
+const icons: Record<Type, { icon: Raw<Component>; color: string }> = {
   success: {
-    icon: IconCheckboxCircle,
+    icon: markRaw(IconCheckboxCircle),
     color: "text-green-500",
   },
   info: {
-    icon: IconInformation,
+    icon: markRaw(IconInformation),
     color: "text-sky-500",
   },
   warning: {
-    icon: IconErrorWarning,
+    icon: markRaw(IconErrorWarning),
     color: "text-orange-500",
   },
   error: {
-    icon: IconForbidLine,
+    icon: markRaw(IconForbidLine),
     color: "text-red-500",
   },
 };
 
-const icon = computed(() => icons[props.type]);
-
 const createTimer = () => {
   if (props.duration < 0) return;
   timer.value = setTimeout(() => {
@@ -115,7 +120,7 @@ defineExpose({ close });
     >
       <div class="toast-body">
         <div class="toast-icon">
-          <component :is="icon.icon" :class="[icon.color]" />
+          <component :is="icons[type].icon" :class="icons[type].color" />
         </div>
         <div class="toast-content">
           <div class="toast-description">