diff --git a/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue b/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue
index ad230bf10..e81a0c47d 100644
--- a/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue
+++ b/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // core libs
-import { computed, nextTick, onMounted, ref, toRaw } from "vue";
+import { computed, nextTick, onMounted, ref } from "vue";
 import { apiClient } from "@/utils/api-client";
 
 // components
@@ -24,6 +24,7 @@ import useSlugify from "@console/composables/use-slugify";
 import { useI18n } from "vue-i18n";
 import { FormType } from "@/types/slug";
 import { useQueryClient } from "@tanstack/vue-query";
+import { cloneDeep } from "lodash-es";
 
 const props = withDefaults(
   defineProps<{
@@ -151,7 +152,7 @@ const handleSaveCategory = async () => {
 
 onMounted(() => {
   if (props.category) {
-    formState.value = toRaw(props.category);
+    formState.value = cloneDeep(props.category);
   }
   selectedParentCategory.value = props.parentCategory?.metadata.name;
   setFocus("displayNameInput");
diff --git a/ui/console-src/modules/contents/posts/tags/components/TagEditingModal.vue b/ui/console-src/modules/contents/posts/tags/components/TagEditingModal.vue
index ba793cdd0..f43dec8e6 100644
--- a/ui/console-src/modules/contents/posts/tags/components/TagEditingModal.vue
+++ b/ui/console-src/modules/contents/posts/tags/components/TagEditingModal.vue
@@ -25,7 +25,7 @@ import useSlugify from "@console/composables/use-slugify";
 import { useI18n } from "vue-i18n";
 import { FormType } from "@/types/slug";
 import { onMounted } from "vue";
-import { toRaw } from "vue";
+import { cloneDeep } from "lodash-es";
 
 const props = withDefaults(
   defineProps<{
@@ -119,7 +119,7 @@ watch(
   () => props.tag,
   (tag) => {
     if (tag) {
-      formState.value = toRaw(tag);
+      formState.value = cloneDeep(tag);
     }
   },
   {
diff --git a/ui/console-src/modules/interface/menus/components/MenuEditingModal.vue b/ui/console-src/modules/interface/menus/components/MenuEditingModal.vue
index 3270c75ec..328e613b0 100644
--- a/ui/console-src/modules/interface/menus/components/MenuEditingModal.vue
+++ b/ui/console-src/modules/interface/menus/components/MenuEditingModal.vue
@@ -2,11 +2,12 @@
 import { Toast, VButton, VModal, VSpace } from "@halo-dev/components";
 import SubmitButton from "@/components/button/SubmitButton.vue";
 import type { Menu } from "@halo-dev/api-client";
-import { onMounted, ref, toRaw } from "vue";
+import { onMounted, ref } from "vue";
 import { apiClient } from "@/utils/api-client";
 import { setFocus } from "@/formkit/utils/focus";
 import { useI18n } from "vue-i18n";
 import { useQueryClient } from "@tanstack/vue-query";
+import { cloneDeep } from "lodash-es";
 
 const props = withDefaults(
   defineProps<{
@@ -75,7 +76,7 @@ const handleSaveMenu = async () => {
 
 onMounted(() => {
   if (props.menu) {
-    formState.value = toRaw(props.menu);
+    formState.value = cloneDeep(props.menu);
   }
   setFocus("menuDisplayNameInput");
 });
diff --git a/ui/console-src/modules/interface/menus/components/MenuItemEditingModal.vue b/ui/console-src/modules/interface/menus/components/MenuItemEditingModal.vue
index ec3c7cb24..22206f768 100644
--- a/ui/console-src/modules/interface/menus/components/MenuItemEditingModal.vue
+++ b/ui/console-src/modules/interface/menus/components/MenuItemEditingModal.vue
@@ -1,12 +1,13 @@
 <script lang="ts" setup>
 import { Toast, VButton, VModal, VSpace } from "@halo-dev/components";
 import SubmitButton from "@/components/button/SubmitButton.vue";
-import { computed, nextTick, onMounted, ref, toRaw } from "vue";
+import { computed, nextTick, onMounted, ref } from "vue";
 import type { Menu, MenuItem, Ref } from "@halo-dev/api-client";
 import { apiClient } from "@/utils/api-client";
 import { setFocus } from "@/formkit/utils/focus";
 import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
 import { useI18n } from "vue-i18n";
+import { cloneDeep } from "lodash-es";
 
 const props = withDefaults(
   defineProps<{
@@ -208,7 +209,7 @@ const onMenuItemSourceChange = () => {
 
 onMounted(() => {
   if (props.menuItem) {
-    formState.value = toRaw(props.menuItem);
+    formState.value = cloneDeep(props.menuItem);
 
     // Set Ref related
     const { targetRef } = formState.value.spec;