[fix][klaytn#174]: avoid underlying watchEffect in rm-store

.eslintrc-auto-import.json

@@ -13,6 +13,7 @@
     "computed": true,
     "computedAsync": true,
     "computedEager": true,
+    "computedEagerUsingWatch": true,
     "computedInject": true,
     "computedWithControl": true,
     "controlledComputed": true,

src/auto-imports.d.ts

@@ -14,6 +14,7 @@ declare global {
   const computed: typeof import('vue')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
+  const computedEagerUsingWatch: typeof import('./composables/computed-eager-using-watch')['computedEagerUsingWatch']
   const computedInject: typeof import('@vueuse/core')['computedInject']
   const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
@@ -333,6 +334,7 @@ declare module '@vue/runtime-core' {
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
     readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
+    readonly computedEagerUsingWatch: UnwrapRef<typeof import('./composables/computed-eager-using-watch')['computedEagerUsingWatch']>
     readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
     readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
     readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>

src/composables/computed-eager-using-watch.ts

@@ -0,0 +1,15 @@
+import { ShallowRef } from 'vue'
+
+export function computedEagerUsingWatch<T>(fn: () => T): ShallowRef<T> {
+  const result = shallowRef()
+
+  watch(
+    fn,
+    (value) => {
+      result.value = value
+    },
+    { flush: 'sync' },
+  )
+
+  return result
+}

src/modules/ModuleLiquidity/store/remove.ts

@@ -198,7 +198,7 @@ export const useLiquidityRmStore = defineStore('liquidity-remove', () => {
 
   const { pair: pairResult, pending: isPairPending, touch: touchPairAddress } = usePairAddress(selectedFiltered)
   const existingPair = computed(() => (pairResult.value?.kind === 'exist' ? pairResult.value : null))
-  const doesPairExist = eagerComputed(() => !!existingPair.value)
+  const doesPairExist = computedEagerUsingWatch(() => !!existingPair.value)
 
   const {
     result: pairBalanceResult,