diff --git a/packages/nc-gui/components/monaco/Editor.vue b/packages/nc-gui/components/monaco/Editor.vue
index 49831adebf..63203a7149 100644
--- a/packages/nc-gui/components/monaco/Editor.vue
+++ b/packages/nc-gui/components/monaco/Editor.vue
@@ -15,28 +15,30 @@ interface Props {
   autoFocus?: boolean
 }
 
-const {
-  hideMinimap,
-  lang = 'json',
-  validate = true,
-  disableDeepCompare = false,
-  readOnly,
-  autoFocus = true,
-  modelValue = '',
-} = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  lang: 'json',
+  validate: true,
+  disableDeepCompare: false,
+  autoFocus: true,
+})
+
+const { modelValue } = toRefs(props)
+
+const { hideMinimap, lang, validate, disableDeepCompare, readOnly, autoFocus } = props
 
 const emits = defineEmits(['update:modelValue'])
 
 const vModel = computed<string>({
   get: () => {
-    if (typeof modelValue === 'object') {
-      return JSON.stringify(modelValue, null, 2)
+    if (typeof modelValue.value === 'object') {
+      return JSON.stringify(modelValue.value, null, 2)
     } else {
-      return modelValue
+      return modelValue.value ?? ''
     }
   },
   set: (newVal: string | Record<string, any>) => {
-    if (typeof modelValue === 'object') {
+    if (typeof modelValue.value === 'object') {
       try {
         emits('update:modelValue', typeof newVal === 'object' ? newVal : JSON.parse(newVal))
       } catch (e) {