fix/removed unnecassry onmount and getter function in watchers

packages/nc-gui-v2/components/cell/Json.vue

@@ -3,7 +3,7 @@ import { Modal as AModal } from 'ant-design-vue'
 import Editor from '~/components/monaco/Editor.vue'
 import FullScreenIcon from '~icons/cil/fullscreen'
 import FullScreenExitIcon from '~icons/cil/fullscreen-exit'
-import { inject, onMounted } from '#imports'
+import { inject } from '#imports'
 import { EditModeInj } from '~/context'
 
 interface Props {
@@ -58,36 +58,27 @@ const onSave = () => {
   vModel = localValue
 }
 
-onMounted(() => {
-  localValue = vModel
-})
-
 watch(
-  () => vModel,
+  $$(vModel),
   (val) => {
     localValue = val
   },
+  { immediate: true },
 )
 
-watch(
-  () => localValue,
-  (val) => {
+watch($$(localValue), (val) => {
   try {
     JSON.parse(val)
     error = undefined
   } catch (e: any) {
     error = e
   }
-  },
-)
+})
 
-watch(
-  () => editEnabled,
-  () => {
+watch(editEnabled, () => {
   isExpanded = false
   localValue = vModel
-  },
-)
+})
 </script>
 
 <template>

packages/nc-gui-v2/components/monaco/Editor.vue

@@ -115,9 +115,7 @@ onMounted(() => {
   }
 })
 
-watch(
-  () => vModel,
-  (v) => {
+watch($$(vModel), (v) => {
   if (!editor || !v) return
 
   const editorValue = editor?.getValue()
@@ -128,8 +126,7 @@ watch(
   } else {
     if (editorValue !== v) editor.setValue(v)
   }
-  },
-)
+})
 </script>
 
 <template>