diff --git a/ui/console-src/modules/contents/pages/components/SinglePageSettingModal.vue b/ui/console-src/modules/contents/pages/components/SinglePageSettingModal.vue
index 972162b6f..0065ccfef 100644
--- a/ui/console-src/modules/contents/pages/components/SinglePageSettingModal.vue
+++ b/ui/console-src/modules/contents/pages/components/SinglePageSettingModal.vue
@@ -6,7 +6,7 @@ import {
   VModal,
   VSpace,
 } from "@halo-dev/components";
-import { computed, nextTick, ref, watchEffect } from "vue";
+import { computed, nextTick, ref, toRaw, watch } from "vue";
 import type { SinglePage } from "@halo-dev/api-client";
 import { cloneDeep } from "lodash-es";
 import { apiClient } from "@/utils/api-client";
@@ -76,6 +76,7 @@ const saving = ref(false);
 const publishing = ref(false);
 const publishCanceling = ref(false);
 const submitType = ref<"publish" | "save">();
+const publishTime = ref<string | undefined>(undefined);
 
 const isUpdateMode = computed(() => {
   return !!formState.value.metadata.creationTimestamp;
@@ -247,26 +248,26 @@ const handleUnpublish = async () => {
   }
 };
 
-watchEffect(() => {
-  if (props.singlePage) {
-    formState.value = cloneDeep(props.singlePage);
+watch(
+  () => props.singlePage,
+  (value) => {
+    if (value) {
+      formState.value = toRaw(value);
+      publishTime.value = toDatetimeLocal(formState.value.spec.publishTime);
+    }
   }
-});
+);
+
+watch(
+  () => publishTime.value,
+  (value) => {
+    formState.value.spec.publishTime = value ? toISOString(value) : undefined;
+  }
+);
 
 // custom templates
 const { templates } = useThemeCustomTemplates("page");
 
-// publishTime
-const publishTime = computed({
-  get() {
-    const { publishTime } = formState.value.spec;
-    return publishTime ? toDatetimeLocal(publishTime) : undefined;
-  },
-  set(value) {
-    formState.value.spec.publishTime = value ? toISOString(value) : undefined;
-  },
-});
-
 // slug
 const { handleGenerateSlug } = useSlugify(
   computed(() => formState.value.spec.title),
diff --git a/ui/console-src/modules/contents/posts/components/PostSettingModal.vue b/ui/console-src/modules/contents/posts/components/PostSettingModal.vue
index e64985e1b..82c8d6c83 100644
--- a/ui/console-src/modules/contents/posts/components/PostSettingModal.vue
+++ b/ui/console-src/modules/contents/posts/components/PostSettingModal.vue
@@ -6,7 +6,7 @@ import {
   VModal,
   VSpace,
 } from "@halo-dev/components";
-import { computed, nextTick, ref, watchEffect } from "vue";
+import { computed, nextTick, ref, toRaw, watch } from "vue";
 import type { Post } from "@halo-dev/api-client";
 import { cloneDeep } from "lodash-es";
 import { apiClient } from "@/utils/api-client";
@@ -78,6 +78,7 @@ const saving = ref(false);
 const publishing = ref(false);
 const publishCanceling = ref(false);
 const submitType = ref<"publish" | "save">();
+const publishTime = ref<string | undefined>(undefined);
 
 const isUpdateMode = computed(() => {
   return !!formState.value.metadata.creationTimestamp;
@@ -208,26 +209,26 @@ const handleUnpublish = async () => {
   }
 };
 
-watchEffect(() => {
-  if (props.post) {
-    formState.value = cloneDeep(props.post);
+watch(
+  () => props.post,
+  (value) => {
+    if (value) {
+      formState.value = toRaw(value);
+      publishTime.value = toDatetimeLocal(formState.value.spec.publishTime);
+    }
   }
-});
+);
+
+watch(
+  () => publishTime.value,
+  (value) => {
+    formState.value.spec.publishTime = value ? toISOString(value) : undefined;
+  }
+);
 
 // custom templates
 const { templates } = useThemeCustomTemplates("post");
 
-// publishTime convert
-const publishTime = computed({
-  get() {
-    const { publishTime } = formState.value.spec;
-    return publishTime ? toDatetimeLocal(publishTime) : undefined;
-  },
-  set(value) {
-    formState.value.spec.publishTime = value ? toISOString(value) : undefined;
-  },
-});
-
 const annotationsFormRef = ref<InstanceType<typeof AnnotationsForm>>();
 
 // slug