From 29a43aee105293faef6ba365a4fe28bff20ea3f2 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 12 Mar 2023 10:53:08 +0530
Subject: [PATCH] fix: wrap store with `storeToRefs` wherever missing

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/SingleSelect.vue   |  4 ++--
 .../components/dashboard/settings/DataSources.vue  |  4 ++--
 .../nc-gui/components/dashboard/settings/Misc.vue  |  4 ++--
 .../dashboard/settings/data-sources/CreateBase.vue |  3 ++-
 .../dashboard/settings/data-sources/EditBase.vue   |  3 ++-
 packages/nc-gui/components/dlg/AirtableImport.vue  |  3 ++-
 packages/nc-gui/components/dlg/TableRename.vue     |  3 ++-
 packages/nc-gui/components/erd/View.vue            |  4 ++--
 .../nc-gui/components/general/HelpAndSupport.vue   |  4 ++--
 packages/nc-gui/components/general/MiniSidebar.vue |  4 ++--
 .../nc-gui/components/smartsheet/ApiSnippet.vue    |  3 ++-
 .../column/LinkedToAnotherRecordOptions.vue        |  4 ++--
 .../components/smartsheet/column/LookupOptions.vue |  4 ++--
 .../components/smartsheet/column/RollupOptions.vue |  4 ++--
 .../smartsheet/toolbar/ExportSubActions.vue        |  3 ++-
 .../components/smartsheet/toolbar/FilterInput.vue  |  4 +++-
 .../components/smartsheet/toolbar/MoreActions.vue  |  3 ++-
 .../components/smartsheet/toolbar/RowHeight.vue    |  4 ++--
 .../components/smartsheet/toolbar/ShareView.vue    |  3 ++-
 .../components/smartsheet/toolbar/ViewActions.vue  |  3 ++-
 .../components/tabs/auth/ApiTokenManagement.vue    |  4 ++--
 .../nc-gui/components/tabs/auth/UserManagement.vue |  3 ++-
 .../tabs/auth/user-management/ShareBase.vue        | 14 ++++++++++++--
 .../tabs/auth/user-management/UsersModal.vue       |  3 ++-
 packages/nc-gui/components/template/Editor.vue     |  5 ++++-
 .../nc-gui/composables/useColumnCreateStore.ts     |  5 ++++-
 .../nc-gui/composables/useExpandedFormStore.ts     |  3 ++-
 packages/nc-gui/composables/useLTARStore.ts        |  3 ++-
 packages/nc-gui/composables/useMapViewDataStore.ts |  4 ++--
 29 files changed, 73 insertions(+), 42 deletions(-)

diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index b41f53fed6..dcdb5b3b28 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -18,8 +18,8 @@ import {
   inject,
   isDrawerOrModalExist,
   ref,
-  storeToRefs,
   useEventListener,
+  useProject,
   useRoles,
   useSelectedCellKeyupListener,
   watch,
@@ -61,7 +61,7 @@ const { getMeta } = useMetas()
 
 const { hasRole } = useRoles()
 
-const { isPg, isMysql } = storeToRefs(useProject())
+const { isPg, isMysql } = useProject()
 
 // a variable to keep newly created option value
 // temporary until it's add the option to column meta
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 47d259c326..d59e3aa932 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -7,7 +7,7 @@ import Metadata from './Metadata.vue'
 import UIAcl from './UIAcl.vue'
 import Erd from './Erd.vue'
 import { ClientType, DataSourcesSubTab } from '~/lib'
-import { useNuxtApp, useProject } from '#imports'
+import { storeToRefs, useNuxtApp, useProject } from '#imports'
 
 interface Props {
   state: string
@@ -24,7 +24,7 @@ const vReload = useVModel(props, 'reload', emits)
 const { $api, $e } = useNuxtApp()
 const projectStore = useProject()
 const { loadProject } = projectStore
-const { project } = projectStore
+const { project } = storeToRefs(projectStore)
 
 let sources = $ref<BaseType[]>([])
 let activeBaseId = $ref('')
diff --git a/packages/nc-gui/components/dashboard/settings/Misc.vue b/packages/nc-gui/components/dashboard/settings/Misc.vue
index af6b07fcfe..803bb62ee2 100644
--- a/packages/nc-gui/components/dashboard/settings/Misc.vue
+++ b/packages/nc-gui/components/dashboard/settings/Misc.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface'
-import { useGlobal, useProject, watch } from '#imports'
+import { storeToRefs, useGlobal, useProject, watch } from '#imports'
 
 const { includeM2M, showNull } = useGlobal()
 
 const projectStore = useProject()
 const { updateProject, loadTables, hasEmptyOrNullFilters } = projectStore
-const { project, projectMeta } = projectStore
+const { project, projectMeta } = storeToRefs(projectStore)
 
 watch(includeM2M, async () => await loadTables())
 
diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
index 7886695486..8aa4b3dc0e 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -20,6 +20,7 @@ import {
   projectTitleValidator,
   readFile,
   ref,
+  storeToRefs,
   useApi,
   useGlobal,
   useI18n,
@@ -35,7 +36,7 @@ const { appInfo } = useGlobal()
 
 const projectStore = useProject()
 const { loadProject } = projectStore
-const { project } = projectStore
+const { project } = storeToRefs(projectStore)
 
 const useForm = Form.useForm
 
diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
index 1cf29424e7..1255ffb3e9 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
@@ -19,6 +19,7 @@ import {
   projectTitleValidator,
   readFile,
   ref,
+  storeToRefs,
   useApi,
   useI18n,
   useNuxtApp,
@@ -33,7 +34,7 @@ const emit = defineEmits(['baseUpdated'])
 
 const projectStore = useProject()
 const { loadProject } = projectStore
-const { project } = projectStore
+const { project } = storeToRefs(projectStore)
 
 const useForm = Form.useForm
 
diff --git a/packages/nc-gui/components/dlg/AirtableImport.vue b/packages/nc-gui/components/dlg/AirtableImport.vue
index 49034ffd64..78047c86ad 100644
--- a/packages/nc-gui/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui/components/dlg/AirtableImport.vue
@@ -12,6 +12,7 @@ import {
   onBeforeUnmount,
   onMounted,
   ref,
+  storeToRefs,
   useGlobal,
   useNuxtApp,
   useProject,
@@ -33,7 +34,7 @@ const { $state } = useNuxtApp()
 
 const projectStore = useProject()
 
-const { project } = projectStore
+const { project } = storeToRefs(projectStore)
 
 const showGoToDashboardButton = ref(false)
 
diff --git a/packages/nc-gui/components/dlg/TableRename.vue b/packages/nc-gui/components/dlg/TableRename.vue
index 85d68d33fe..92eaa5091e 100644
--- a/packages/nc-gui/components/dlg/TableRename.vue
+++ b/packages/nc-gui/components/dlg/TableRename.vue
@@ -8,6 +8,7 @@ import {
   message,
   nextTick,
   reactive,
+  storeToRefs,
   useI18n,
   useMetas,
   useNuxtApp,
@@ -40,7 +41,7 @@ const { updateTab } = useTabs()
 
 const projectStore = useProject()
 const { loadTables, isMysql, isMssql, isPg } = projectStore
-const { project } = projectStore
+const { project } = storeToRefs(projectStore)
 
 const inputEl = $ref<ComponentPublicInstance>()
 
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index a476a73b17..4857bf4779 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -2,11 +2,11 @@
 import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { ERDConfig } from './utils'
-import { reactive, ref, useMetas, useProject, watch } from '#imports'
+import { reactive, ref, storeToRefs, useMetas, useProject, watch } from '#imports'
 
 const props = defineProps<{ table?: TableType; baseId?: string }>()
 
-const { tables: projectTables } = useProject()
+const { tables: projectTables } = storeToRefs(useProject())
 
 const { metas, getMeta } = useMetas()
 
diff --git a/packages/nc-gui/components/general/HelpAndSupport.vue b/packages/nc-gui/components/general/HelpAndSupport.vue
index 106ecc506e..9a522c6907 100644
--- a/packages/nc-gui/components/general/HelpAndSupport.vue
+++ b/packages/nc-gui/components/general/HelpAndSupport.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { ref, useGlobal, useProject, useRoute } from '#imports'
+import { ref, storeToRefs, useGlobal, useProject, useRoute } from '#imports'
 
 const showDrawer = ref(false)
 
 const { appInfo } = useGlobal()
 
-const { project } = useProject()
+const { project } = storeToRefs(useProject())
 
 const route = useRoute()
 
diff --git a/packages/nc-gui/components/general/MiniSidebar.vue b/packages/nc-gui/components/general/MiniSidebar.vue
index 50c73fefd0..af2d15b08d 100644
--- a/packages/nc-gui/components/general/MiniSidebar.vue
+++ b/packages/nc-gui/components/general/MiniSidebar.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { computed, navigateTo, useGlobal, useProject, useRoute, useSidebar } from '#imports'
+import { computed, navigateTo, storeToRefs, useGlobal, useProject, useRoute, useSidebar } from '#imports'
 
 const { signOut, signedIn, user, currentVersion } = useGlobal()
 
 const { isOpen } = useSidebar('nc-mini-sidebar', { isOpen: true })
 
-const { project } = useProject()
+const { project } = storeToRefs(useProject())
 
 const route = useRoute()
 
diff --git a/packages/nc-gui/components/smartsheet/ApiSnippet.vue b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
index 8a892c2748..192af6a237 100644
--- a/packages/nc-gui/components/smartsheet/ApiSnippet.vue
+++ b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
@@ -6,6 +6,7 @@ import {
   inject,
   message,
   ref,
+  storeToRefs,
   useCopy,
   useGlobal,
   useI18n,
@@ -24,7 +25,7 @@ const emits = defineEmits(['update:modelValue'])
 
 const { t } = useI18n()
 
-const { project } = $(useProject())
+const { project } = $(storeToRefs(useProject()))
 
 const { appInfo, token } = $(useGlobal())
 
diff --git a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
index a7fb2485e7..0108fb8976 100644
--- a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ModelTypes, MssqlUi, SqliteUi } from 'nocodb-sdk'
-import { MetaInj, inject, ref, useProject, useVModel } from '#imports'
+import { MetaInj, inject, ref, storeToRefs, useProject, useVModel } from '#imports'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 
@@ -16,7 +16,7 @@ const meta = $(inject(MetaInj, ref()))
 
 const { setAdditionalValidations, validateInfos, onDataTypeChange, sqlUi } = useColumnCreateStoreOrThrow()
 
-const { tables } = $(useProject())
+const { tables } = $(storeToRefs(useProject()))
 
 setAdditionalValidations({
   childId: [{ required: true, message: 'Required' }],
diff --git a/packages/nc-gui/components/smartsheet/column/LookupOptions.vue b/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
index 6c11fe9c27..3ef7a455b8 100644
--- a/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
@@ -3,7 +3,7 @@ import { onMounted } from '@vue/runtime-core'
 import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn } from 'nocodb-sdk'
 import { getRelationName } from './utils'
-import { MetaInj, inject, ref, useColumnCreateStoreOrThrow, useMetas, useProject, useVModel } from '#imports'
+import { MetaInj, inject, ref, storeToRefs, useColumnCreateStoreOrThrow, useMetas, useProject, useVModel } from '#imports'
 
 const props = defineProps<{
   value: any
@@ -17,7 +17,7 @@ const meta = $(inject(MetaInj, ref()))
 
 const { setAdditionalValidations, validateInfos, onDataTypeChange, isEdit } = useColumnCreateStoreOrThrow()
 
-const { tables } = $(useProject())
+const { tables } = $(storeToRefs(useProject()))
 
 const { metas } = $(useMetas())
 
diff --git a/packages/nc-gui/components/smartsheet/column/RollupOptions.vue b/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
index e52ad0da7f..54b24069af 100644
--- a/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
@@ -3,7 +3,7 @@ import { onMounted } from '@vue/runtime-core'
 import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
 import { getRelationName } from './utils'
-import { MetaInj, inject, ref, useColumnCreateStoreOrThrow, useMetas, useProject, useVModel } from '#imports'
+import { MetaInj, inject, ref, storeToRefs, useColumnCreateStoreOrThrow, useMetas, useProject, useVModel } from '#imports'
 
 const props = defineProps<{
   value: any
@@ -17,7 +17,7 @@ const meta = $(inject(MetaInj, ref()))
 
 const { setAdditionalValidations, validateInfos, onDataTypeChange, isEdit } = useColumnCreateStoreOrThrow()
 
-const { tables } = $(useProject())
+const { tables } = $(storeToRefs(useProject()))
 
 const { metas } = $(useMetas())
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
index 773e2f4187..ab9e3383f2 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
@@ -10,6 +10,7 @@ import {
   inject,
   message,
   ref,
+  storeToRefs,
   useI18n,
   useNuxtApp,
   useProject,
@@ -22,7 +23,7 @@ const isPublicView = inject(IsPublicInj, ref(false))
 
 const fields = inject(FieldsInj, ref([]))
 
-const { project } = useProject()
+const { project } = storeToRefs(useProject())
 
 const { $api } = useNuxtApp()
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue b/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue
index f664861195..3d6b8d57dc 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
+import { storeToRefs } from 'pinia'
 import {
   ColumnInj,
   EditModeInj,
@@ -83,7 +84,8 @@ const checkTypeFunctions = {
 
 type FilterType = keyof typeof checkTypeFunctions
 
-const { sqlUi } = $(useProject())
+// todo: replace with sqlUis
+const { sqlUi } = $(storeToRefs(useProject()))
 
 const abstractType = $computed(() => (column.value?.dt && sqlUi ? sqlUi.getAbstractType(column.value) : null))
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue b/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
index ba0f44136d..a38bc1da62 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { RequestParams } from 'nocodb-sdk'
 import { ExportTypes } from 'nocodb-sdk'
+import { storeToRefs } from 'pinia'
 import {
   ActiveViewInj,
   FieldsInj,
@@ -27,7 +28,7 @@ const isPublicView = inject(IsPublicInj, ref(false))
 
 const isView = false
 
-const { project } = useProject()
+const { project } = storeToRefs(useProject())
 
 const { $api } = useNuxtApp()
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue b/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
index 177e748cf2..94284b1086 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { GridType } from 'nocodb-sdk'
-import { ActiveViewInj, IsLockedInj, inject, ref, useMenuCloseOnEsc } from '#imports'
+import { ActiveViewInj, IsLockedInj, inject, ref, storeToRefs, useMenuCloseOnEsc } from '#imports'
 
-const { isSharedBase } = useProject()
+const { isSharedBase } = storeToRefs(useProject())
 
 const view = inject(ActiveViewInj, ref())
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index c44e3ca96f..02fc2bfb03 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -9,6 +9,7 @@ import {
   message,
   projectThemeColors,
   ref,
+  storeToRefs,
   useCopy,
   useDashboard,
   useI18n,
@@ -32,7 +33,7 @@ const { dashboardUrl } = useDashboard()
 
 const { isUIAllowed } = useUIPermission()
 
-const { isSharedBase } = useProject()
+const { isSharedBase } = storeToRefs(useProject())
 
 let showShareModel = $ref(false)
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index 2a5c6f7e9e..8ee7f1b475 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@@ -9,6 +9,7 @@ import {
   inject,
   message,
   ref,
+  storeToRefs,
   useI18n,
   useMenuCloseOnEsc,
   useNuxtApp,
@@ -58,7 +59,7 @@ const quickImportDialogs: Record<typeof quickImportDialogTypes[number], Ref<bool
 
 const { isUIAllowed } = useUIPermission()
 
-const { isSharedBase } = useProject()
+const { isSharedBase } = storeToRefs(useProject())
 
 const meta = inject(MetaInj, ref())
 
diff --git a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
index 20752fd43e..3a4adda3ef 100644
--- a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ApiTokenType } from 'nocodb-sdk'
-import { extractSdkResponseErrorMsg, message, onMounted, useCopy, useI18n, useNuxtApp, useProject } from '#imports'
+import { extractSdkResponseErrorMsg, message, onMounted, storeToRefs, useCopy, useI18n, useNuxtApp, useProject } from '#imports'
 
 interface ApiToken extends ApiTokenType {
   show?: boolean
@@ -10,7 +10,7 @@ const { t } = useI18n()
 
 const { $api, $e } = useNuxtApp()
 
-const { project } = $(useProject())
+const { project } = $(storeToRefs(useProject()))
 
 const { copy } = useCopy()
 
diff --git a/packages/nc-gui/components/tabs/auth/UserManagement.vue b/packages/nc-gui/components/tabs/auth/UserManagement.vue
index fa73d2f080..58ae377b37 100644
--- a/packages/nc-gui/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/UserManagement.vue
@@ -7,6 +7,7 @@ import {
   onBeforeMount,
   projectRoleTagColors,
   ref,
+  storeToRefs,
   useApi,
   useCopy,
   useDashboard,
@@ -24,7 +25,7 @@ const { $e } = useNuxtApp()
 
 const { api } = useApi()
 
-const { project } = useProject()
+const { project } = storeToRefs(useProject())
 
 const { copy } = useCopy()
 
diff --git a/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue b/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
index ae1fb34655..e5c37d7c7d 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
-import { extractSdkResponseErrorMsg, message, onMounted, useCopy, useDashboard, useI18n, useNuxtApp, useProject } from '#imports'
+import {
+  extractSdkResponseErrorMsg,
+  message,
+  onMounted,
+  storeToRefs,
+  useCopy,
+  useDashboard,
+  useI18n,
+  useNuxtApp,
+  useProject,
+} from '#imports'
 
 interface ShareBase {
   uuid?: string
@@ -22,7 +32,7 @@ let base = $ref<null | ShareBase>(null)
 
 const showEditBaseDropdown = $ref(false)
 
-const { project } = useProject()
+const { project } = storeToRefs(useProject())
 
 const { copy } = useCopy()
 
diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index 2d18e91336..26c2649457 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -9,6 +9,7 @@ import {
   projectRoleTagColors,
   projectRoles,
   ref,
+  storeToRefs,
   useActiveKeyupListener,
   useCopy,
   useDashboard,
@@ -37,7 +38,7 @@ const emit = defineEmits(['closed', 'reload'])
 
 const { t } = useI18n()
 
-const { project } = useProject()
+const { project } = storeToRefs(useProject())
 
 const { $api, $e } = useNuxtApp()
 
diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 22b17e6543..eb95662fa7 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -24,6 +24,7 @@ import {
   parseStringDate,
   reactive,
   ref,
+  storeToRefs,
   useI18n,
   useNuxtApp,
   useProject,
@@ -67,7 +68,9 @@ const { $api } = useNuxtApp()
 
 const { addTab } = useTabs()
 
-const { sqlUis, project, loadTables } = useProject()
+const projectStrore = useProject()
+const { loadTables } = projectStrore
+const { sqlUis, project } = storeToRefs(projectStrore)
 
 const sqlUi = ref(sqlUis.value[baseId] || Object.values(sqlUis.value)[0])
 
diff --git a/packages/nc-gui/composables/useColumnCreateStore.ts b/packages/nc-gui/composables/useColumnCreateStore.ts
index d1b5ebb68b..8681cba111 100644
--- a/packages/nc-gui/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui/composables/useColumnCreateStore.ts
@@ -10,6 +10,7 @@ import {
   extractSdkResponseErrorMsg,
   message,
   ref,
+  storeToRefs,
   useI18n,
   useMetas,
   useNuxtApp,
@@ -27,7 +28,9 @@ interface ValidationsObj {
 
 const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState(
   (meta: Ref<TableType | undefined>, column: Ref<ColumnType | undefined>) => {
-    const { project, sqlUis, isMysql: isMysqlFunc, isPg: isPgFunc, isMssql: isMssqlFunc } = useProject()
+    const projectStore = useProject()
+    const { isMysql: isMysqlFunc, isPg: isPgFunc, isMssql: isMssqlFunc } = projectStore
+    const { project, sqlUis } = storeToRefs(projectStore)
 
     const { $api } = useNuxtApp()
 
diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts
index 79f4590c30..b21c972d0a 100644
--- a/packages/nc-gui/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui/composables/useExpandedFormStore.ts
@@ -11,6 +11,7 @@ import {
   message,
   populateInsertObject,
   ref,
+  storeToRefs,
   useApi,
   useI18n,
   useInjectionState,
@@ -42,7 +43,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
 
   const changedColumns = ref(new Set<string>())
 
-  const { project } = useProject()
+  const { project } = storeToRefs(useProject())
 
   const rowStore = useProvideSmartsheetRowStore(meta, row)
 
diff --git a/packages/nc-gui/composables/useLTARStore.ts b/packages/nc-gui/composables/useLTARStore.ts
index 5ed203b7e1..443492b65d 100644
--- a/packages/nc-gui/composables/useLTARStore.ts
+++ b/packages/nc-gui/composables/useLTARStore.ts
@@ -11,6 +11,7 @@ import {
   message,
   reactive,
   ref,
+  storeToRefs,
   useI18n,
   useInjectionState,
   useMetas,
@@ -38,7 +39,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     // state
     const { metas, getMeta } = useMetas()
 
-    const { project } = useProject()
+    const { project } = storeToRefs(useProject())
 
     const { $api } = useNuxtApp()
 
diff --git a/packages/nc-gui/composables/useMapViewDataStore.ts b/packages/nc-gui/composables/useMapViewDataStore.ts
index 1ac4a6ecba..3402e6930f 100644
--- a/packages/nc-gui/composables/useMapViewDataStore.ts
+++ b/packages/nc-gui/composables/useMapViewDataStore.ts
@@ -1,7 +1,7 @@
 import { reactive } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import type { ColumnType, MapType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
-import { IsPublicInj, ref, useInjectionState, useMetas, useProject } from '#imports'
+import { IsPublicInj, ref, storeToRefs, useInjectionState, useMetas, useProject } from '#imports'
 import type { Row } from '~/lib'
 
 const storedValue = localStorage.getItem('geodataToggleState')
@@ -35,7 +35,7 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
 
     const { api } = useApi()
 
-    const { project } = useProject()
+    const { project } = storeToRefs(useProject())
 
     const { $api } = useNuxtApp()