fix: update initial values when form data changes (#5993)

#### What type of PR is this?

/area ui
/kind bug
/milestone 2.16.x

#### What this PR does / why we need it:

修复部分表单数据更新时，引用的初始值对象被跟着更新的问题。

#### Does this PR introduce a user-facing change?

```release-note
None
```

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");

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);
     }
   },
   {

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");
 });

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;