From 7899ee1bfeec87a1c0d538ae6b449f684e837e9d Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 8 Aug 2022 16:00:15 +0530
Subject: [PATCH] fix/removed unnecassry onmount and getter function in
 watchers

---
 packages/nc-gui-v2/components/cell/Json.vue   | 39 +++++++------------
 .../nc-gui-v2/components/monaco/Editor.vue    | 25 ++++++------
 2 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index 3168185ce6..fb840fdcbb 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/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) => {
-    try {
-      JSON.parse(val)
-      error = undefined
-    } catch (e: any) {
-      error = e
-    }
-  },
-)
+watch($$(localValue), (val) => {
+  try {
+    JSON.parse(val)
+    error = undefined
+  } catch (e: any) {
+    error = e
+  }
+})
 
-watch(
-  () => editEnabled,
-  () => {
-    isExpanded = false
-    localValue = vModel
-  },
-)
+watch(editEnabled, () => {
+  isExpanded = false
+  localValue = vModel
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/monaco/Editor.vue b/packages/nc-gui-v2/components/monaco/Editor.vue
index d6c5a912e8..ac8c0c0641 100644
--- a/packages/nc-gui-v2/components/monaco/Editor.vue
+++ b/packages/nc-gui-v2/components/monaco/Editor.vue
@@ -115,21 +115,18 @@ onMounted(() => {
   }
 })
 
-watch(
-  () => vModel,
-  (v) => {
-    if (!editor || !v) return
-
-    const editorValue = editor?.getValue()
-    if (!disableDeepCompare) {
-      if (!editorValue || !deepCompare(JSON.parse(v), JSON.parse(editorValue))) {
-        editor.setValue(v)
-      }
-    } else {
-      if (editorValue !== v) editor.setValue(v)
+watch($$(vModel), (v) => {
+  if (!editor || !v) return
+
+  const editorValue = editor?.getValue()
+  if (!disableDeepCompare) {
+    if (!editorValue || !deepCompare(JSON.parse(v), JSON.parse(editorValue))) {
+      editor.setValue(v)
     }
-  },
-)
+  } else {
+    if (editorValue !== v) editor.setValue(v)
+  }
+})
 </script>
 
 <template>