refactor(gui-v2): type correction and avoid unnecessary callback in watch

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { TableType } from 'nocodb-sdk'
+import type { ComputedRef } from 'vue'
 import { computed, inject } from 'vue'
 import Draggable from 'vuedraggable'
 import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/context'
@@ -38,7 +40,7 @@ const {
   hideAll,
   saveOrUpdate,
   sortedFields,
-} = useViewColumns(activeView, meta, false, () => reloadDataHook?.trigger())
+} = useViewColumns(activeView, meta as ComputedRef<TableType>, false, () => reloadDataHook?.trigger())
 
 watch(
   () => activeView?.value?.id,

packages/nc-gui-v2/composables/useViewColumns.ts

@@ -1,12 +1,12 @@
 import { isSystemColumn } from 'nocodb-sdk'
 import type { ColumnType, FormType, GalleryType, GridType, TableType } from 'nocodb-sdk'
 import { watch } from 'vue'
-import type { Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#app'
 
 export default function (
   view: Ref<(GridType | FormType | GalleryType) & { id?: string }> | undefined,
-  meta: Ref<TableType> | undefined,
+  meta: ComputedRef<TableType>,
   isPublic = false,
   reloadData?: () => void,
 ) {
@@ -131,10 +131,7 @@ export default function (
   })
 
   // reload view columns when table meta changes
-  watch(
+  watch(meta, () => loadViewColumns())
-    () => meta?.value,
-    () => loadViewColumns(),
-  )
 
   return {
     fields,

packages/nc-gui-v2/context/index.ts

@@ -5,7 +5,7 @@ import type { useViewData } from '#imports'
 import type { TabItem } from '~/composables/useTabs'
 
 export const ColumnInj: InjectionKey<ColumnType & { meta: any }> = Symbol('column-injection')
-export const MetaInj: InjectionKey<Ref<TableType>> = Symbol('meta-injection')
+export const MetaInj: InjectionKey<ComputedRef<TableType>> = Symbol('meta-injection')
 export const TabMetaInj: InjectionKey<ComputedRef<TabItem>> = Symbol('tab-meta-injection')
 export const PaginationDataInj: InjectionKey<ReturnType<typeof useViewData>['paginationData']> =
   Symbol('pagination-data-injection')