diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index e601b77..9d7e9f6 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,4 +1,4 @@
 export * from './useBoolean'
 export * from './useEcharts'
 export * from './usePermission'
-export * from './refForm'
+export * from './useDefault'
diff --git a/src/hooks/refForm.ts b/src/hooks/refForm.ts
deleted file mode 100644
index a7f925c..0000000
--- a/src/hooks/refForm.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export function refForm<T>(initValue: T) {
-  function jsonClone(value: T) {
-    return JSON.parse(JSON.stringify(value))
-  }
-  const target = ref<T>(initValue)
-
-  function setDefault() {
-    target.value = jsonClone(initValue)
-  }
-
-  return {
-    target,
-    setDefault,
-  }
-}
diff --git a/src/hooks/useDefault.ts b/src/hooks/useDefault.ts
new file mode 100644
index 0000000..7aa931e
--- /dev/null
+++ b/src/hooks/useDefault.ts
@@ -0,0 +1,15 @@
+/**
+ * Apply default value to a ref.
+ */
+export function useDefault<T>(defaultValue: T): Ref<T> {
+  const source: Ref<T | undefined | null> = ref()
+
+  return computed({
+    get() {
+      return source.value ?? defaultValue
+    },
+    set(value) {
+      source.value = value
+    },
+  })
+}
diff --git a/src/views/setting/account/components/TableModal.vue b/src/views/setting/account/components/TableModal.vue
index 9caf724..a33a4f2 100644
--- a/src/views/setting/account/components/TableModal.vue
+++ b/src/views/setting/account/components/TableModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { refForm, useBoolean } from '@/hooks'
+import { useBoolean, useDefault } from '@/hooks'
 import { fetchRoleList } from '@/service'
 
 interface Props {
@@ -19,7 +19,7 @@ const { bool: modalVisible, setTrue: showModal, setFalse: hiddenModal } = useBoo
 
 const { bool: submitLoading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false)
 
-const { target: formModel, setDefault } = refForm<Entity.User>({
+const formModel = useDefault<Entity.User>({
   userName: '',
   gender: undefined,
   email: '',
@@ -46,7 +46,8 @@ async function openModal(type: ModalType = 'add', data: any) {
   getRoleList()
   const handlers = {
     async add() {
-      setDefault()
+      // @ts-expect-error undefined is safe
+      formModel.value = undefined
     },
     async view() {
       if (!data)
diff --git a/src/views/setting/menu/components/TableModal.vue b/src/views/setting/menu/components/TableModal.vue
index 3f8fd8f..d3d626a 100644
--- a/src/views/setting/menu/components/TableModal.vue
+++ b/src/views/setting/menu/components/TableModal.vue
@@ -3,7 +3,7 @@ import type {
   FormItemRule,
 } from 'naive-ui'
 import HelpInfo from '@/components/common/HelpInfo.vue'
-import { refForm, useBoolean } from '@/hooks'
+import { useBoolean, useDefault } from '@/hooks'
 import { Regex } from '@/constants'
 import { fetchRoleList } from '@/service'
 
@@ -24,7 +24,7 @@ const emit = defineEmits<{
 const { bool: modalVisible, setTrue: showModal, setFalse: hiddenModal } = useBoolean(false)
 const { bool: submitLoading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false)
 
-const { target: formModel, setDefault } = refForm<AppRoute.RowRoute>({
+const formModel = useDefault<AppRoute.RowRoute>({
   'name': '',
   'path': '',
   'id': -1,
@@ -61,7 +61,8 @@ async function openModal(type: ModalType = 'add', data: AppRoute.RowRoute) {
   showModal()
   const handlers = {
     async add() {
-      setDefault()
+      // @ts-expect-error undefined is safe
+      formModel.value = undefined
     },
     async view() {
       if (!data)