diff --git a/packages/modal/src/vue/Web3AuthProvider.ts b/packages/modal/src/vue/Web3AuthProvider.ts
index c7a777eca..2c244dacd 100644
--- a/packages/modal/src/vue/Web3AuthProvider.ts
+++ b/packages/modal/src/vue/Web3AuthProvider.ts
@@ -1,5 +1,6 @@
 import {
   ANALYTICS_INTEGRATION_TYPE,
+  type ChainNamespaceType,
   CONNECTOR_EVENTS,
   CONNECTOR_STATUS,
   type CONNECTOR_STATUS_TYPE,
@@ -23,6 +24,8 @@ export const Web3AuthProvider = defineComponent({
     const isMFAEnabled = ref(false);
     const status = ref<CONNECTOR_STATUS_TYPE | null>(null);
     const isAuthorized = ref(false);
+    const chainId = ref<string | null>(null);
+    const chainNamespace = ref<ChainNamespaceType | null>(null);
 
     const isInitializing = ref(false);
     const initError = ref<Error | null>(null);
@@ -48,6 +51,8 @@ export const Web3AuthProvider = defineComponent({
           isConnected.value = false;
           isAuthorized.value = false;
           status.value = null;
+          chainId.value = null;
+          chainNamespace.value = null;
         };
 
         onInvalidate(() => {
@@ -109,6 +114,8 @@ export const Web3AuthProvider = defineComponent({
             if (!isInitialized.value) isInitialized.value = true;
             isConnected.value = true;
             provider.value = newWeb3Auth.provider;
+            chainId.value = web3Auth.value!.currentChainId;
+            chainNamespace.value = web3Auth.value!.currentChain?.chainNamespace ?? null;
           }
         };
 
@@ -170,6 +177,27 @@ export const Web3AuthProvider = defineComponent({
       { immediate: true }
     );
 
+    // Listen for chain changes on the provider
+    watch(
+      provider,
+      (newProvider, prevProvider) => {
+        const handleChainChange = (newChainId: string) => {
+          chainId.value = newChainId;
+          chainNamespace.value = web3Auth.value?.currentChain?.chainNamespace ?? null;
+        };
+
+        // unregister previous listener
+        if (prevProvider && newProvider !== prevProvider) {
+          prevProvider.removeListener("chainChanged", handleChainChange);
+        }
+
+        if (newProvider && newProvider !== prevProvider) {
+          newProvider.on("chainChanged", handleChainChange);
+        }
+      },
+      { immediate: true }
+    );
+
     provide<IWeb3AuthInnerContext>(Web3AuthContextKey, {
       web3Auth,
       isConnected,
@@ -180,6 +208,8 @@ export const Web3AuthProvider = defineComponent({
       isInitializing,
       initError,
       isMFAEnabled,
+      chainId,
+      chainNamespace,
       getPlugin,
       setIsMFAEnabled,
     });
diff --git a/packages/modal/src/vue/composables/useChain.ts b/packages/modal/src/vue/composables/useChain.ts
index a0b555d66..2320ad436 100644
--- a/packages/modal/src/vue/composables/useChain.ts
+++ b/packages/modal/src/vue/composables/useChain.ts
@@ -1,28 +1,18 @@
 import { ChainNamespaceType } from "@web3auth/no-modal";
-import { computed, ComputedRef } from "vue";
+import { Ref } from "vue";
 
 import { useWeb3AuthInner } from "./useWeb3AuthInner";
 
 export type IUseChain = {
-  chainId: ComputedRef<string | null>;
-  chainNamespace: ComputedRef<ChainNamespaceType | null>;
+  chainId: Ref<string | null>;
+  chainNamespace: Ref<ChainNamespaceType | null>;
 };
 
 export const useChain = (): IUseChain => {
   const context = useWeb3AuthInner();
 
-  const chainId = computed(() => {
-    if (!context.web3Auth.value?.currentChain) return null;
-    return context.web3Auth.value.currentChain.chainId;
-  });
-
-  const chainNamespace = computed(() => {
-    if (!context.web3Auth.value?.currentChain) return null;
-    return context.web3Auth.value.currentChain.chainNamespace;
-  });
-
   return {
-    chainId,
-    chainNamespace,
+    chainId: context.chainId,
+    chainNamespace: context.chainNamespace,
   };
 };
diff --git a/packages/modal/src/vue/interfaces.ts b/packages/modal/src/vue/interfaces.ts
index 9c55a6407..da1f660f7 100644
--- a/packages/modal/src/vue/interfaces.ts
+++ b/packages/modal/src/vue/interfaces.ts
@@ -1,4 +1,4 @@
-import type { CONNECTOR_STATUS_TYPE, IPlugin, IProvider, WalletServicesPluginType } from "@web3auth/no-modal";
+import type { ChainNamespaceType, CONNECTOR_STATUS_TYPE, IPlugin, IProvider, WalletServicesPluginType } from "@web3auth/no-modal";
 import { Ref, ShallowRef } from "vue";
 
 import type { Web3Auth, Web3AuthOptions } from "../modalManager";
@@ -20,6 +20,8 @@ interface IBaseWeb3AuthComposableContext {
   isInitialized: Ref<boolean>;
   status: Ref<CONNECTOR_STATUS_TYPE | null>;
   isMFAEnabled: Ref<boolean>;
+  chainId: Ref<string | null>;
+  chainNamespace: Ref<ChainNamespaceType | null>;
   getPlugin: (pluginName: string) => IPlugin | null;
   setIsMFAEnabled: (isMfaEnabled: boolean) => void;
 }
diff --git a/packages/no-modal/src/vue/Web3AuthProvider.ts b/packages/no-modal/src/vue/Web3AuthProvider.ts
index d591db79e..d64ab5388 100644
--- a/packages/no-modal/src/vue/Web3AuthProvider.ts
+++ b/packages/no-modal/src/vue/Web3AuthProvider.ts
@@ -2,6 +2,7 @@ import { defineComponent, h, PropType, provide, ref, shallowRef, watch } from "v
 
 import {
   ANALYTICS_INTEGRATION_TYPE,
+  type ChainNamespaceType,
   CONNECTOR_EVENTS,
   CONNECTOR_STATUS,
   type CONNECTOR_STATUS_TYPE,
@@ -22,6 +23,8 @@ export const Web3AuthProvider = defineComponent({
     const provider = ref<IProvider | null>(null);
     const isMFAEnabled = ref(false);
     const status = ref<CONNECTOR_STATUS_TYPE | null>(null);
+    const chainId = ref<string | null>(null);
+    const chainNamespace = ref<ChainNamespaceType | null>(null);
 
     const isInitializing = ref(false);
     const initError = ref<Error | null>(null);
@@ -48,6 +51,8 @@ export const Web3AuthProvider = defineComponent({
           isConnected.value = false;
           isAuthorized.value = false;
           status.value = null;
+          chainId.value = null;
+          chainNamespace.value = null;
         };
 
         onInvalidate(() => {
@@ -111,6 +116,8 @@ export const Web3AuthProvider = defineComponent({
             if (!isInitialized.value) isInitialized.value = true;
             isConnected.value = true;
             provider.value = newWeb3Auth.provider;
+            chainId.value = web3Auth.value!.currentChainId;
+            chainNamespace.value = web3Auth.value!.currentChain?.chainNamespace ?? null;
           }
         };
 
@@ -172,6 +179,27 @@ export const Web3AuthProvider = defineComponent({
       { immediate: true }
     );
 
+    // Listen for chain changes on the provider
+    watch(
+      provider,
+      (newProvider, prevProvider) => {
+        const handleChainChange = (newChainId: string) => {
+          chainId.value = newChainId;
+          chainNamespace.value = web3Auth.value?.currentChain?.chainNamespace ?? null;
+        };
+
+        // unregister previous listener
+        if (prevProvider && newProvider !== prevProvider) {
+          prevProvider.removeListener("chainChanged", handleChainChange);
+        }
+
+        if (newProvider && newProvider !== prevProvider) {
+          newProvider.on("chainChanged", handleChainChange);
+        }
+      },
+      { immediate: true }
+    );
+
     provide<IWeb3AuthInnerContext>(Web3AuthContextKey, {
       web3Auth,
       isConnected,
@@ -181,6 +209,8 @@ export const Web3AuthProvider = defineComponent({
       isInitializing,
       initError,
       isMFAEnabled,
+      chainId,
+      chainNamespace,
       getPlugin,
       setIsMFAEnabled,
       isAuthorized,
diff --git a/packages/no-modal/src/vue/composables/useChain.ts b/packages/no-modal/src/vue/composables/useChain.ts
index ad79dbe2d..0a9bae592 100644
--- a/packages/no-modal/src/vue/composables/useChain.ts
+++ b/packages/no-modal/src/vue/composables/useChain.ts
@@ -1,28 +1,18 @@
-import { computed, ComputedRef } from "vue";
+import { Ref } from "vue";
 
 import { ChainNamespaceType } from "../../base";
 import { useWeb3AuthInner } from "./useWeb3AuthInner";
 
 export type IUseChain = {
-  chainId: ComputedRef<string | null>;
-  chainNamespace: ComputedRef<ChainNamespaceType | null>;
+  chainId: Ref<string | null>;
+  chainNamespace: Ref<ChainNamespaceType | null>;
 };
 
 export const useChain = (): IUseChain => {
   const context = useWeb3AuthInner();
 
-  const chainId = computed(() => {
-    if (!context.web3Auth.value?.currentChain) return null;
-    return context.web3Auth.value.currentChain.chainId;
-  });
-
-  const chainNamespace = computed(() => {
-    if (!context.web3Auth.value?.currentChain) return null;
-    return context.web3Auth.value.currentChain.chainNamespace;
-  });
-
   return {
-    chainId,
-    chainNamespace,
+    chainId: context.chainId,
+    chainNamespace: context.chainNamespace,
   };
 };
diff --git a/packages/no-modal/src/vue/composables/useWeb3Auth.ts b/packages/no-modal/src/vue/composables/useWeb3Auth.ts
index 84c78e482..1c4c301af 100644
--- a/packages/no-modal/src/vue/composables/useWeb3Auth.ts
+++ b/packages/no-modal/src/vue/composables/useWeb3Auth.ts
@@ -4,7 +4,8 @@ import { useWeb3AuthInner } from "./useWeb3AuthInner";
 export type IWeb3AuthNoModalContext = Omit<IWeb3AuthInnerContext, "isMFAEnabled" | "setIsMFAEnabled">;
 
 export const useWeb3Auth = (): IWeb3AuthNoModalContext => {
-  const { initError, isConnected, isInitialized, isInitializing, isAuthorized, provider, status, web3Auth, getPlugin } = useWeb3AuthInner();
+  const { initError, isConnected, isInitialized, isInitializing, isAuthorized, provider, status, web3Auth, getPlugin, chainId, chainNamespace } =
+    useWeb3AuthInner();
   return {
     initError,
     isConnected,
@@ -14,6 +15,8 @@ export const useWeb3Auth = (): IWeb3AuthNoModalContext => {
     provider,
     status,
     web3Auth,
+    chainId,
+    chainNamespace,
     getPlugin,
   };
 };
diff --git a/packages/no-modal/src/vue/interfaces.ts b/packages/no-modal/src/vue/interfaces.ts
index 3bd67dcd3..4e3136f66 100644
--- a/packages/no-modal/src/vue/interfaces.ts
+++ b/packages/no-modal/src/vue/interfaces.ts
@@ -1,6 +1,6 @@
 import { Ref, ShallowRef } from "vue";
 
-import type { CONNECTOR_STATUS_TYPE, IPlugin, IProvider, IWeb3AuthCoreOptions } from "../base";
+import type { ChainNamespaceType, CONNECTOR_STATUS_TYPE, IPlugin, IProvider, IWeb3AuthCoreOptions } from "../base";
 import type { Web3AuthNoModal } from "../noModal";
 import { WalletServicesPluginType } from "../plugins/wallet-services-plugin";
 
@@ -21,6 +21,8 @@ interface IBaseWeb3AuthComposableContext {
   isInitialized: Ref<boolean>;
   status: Ref<CONNECTOR_STATUS_TYPE | null>;
   isMFAEnabled: Ref<boolean>;
+  chainId: Ref<string | null>;
+  chainNamespace: Ref<ChainNamespaceType | null>;
   getPlugin: (pluginName: string) => IPlugin | null;
   setIsMFAEnabled: (isMfaEnabled: boolean) => void;
 }