From c77390da64e5ce1b96f7f1b24944e2725f8c16ac Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Wed, 20 Aug 2025 09:50:50 -0700
Subject: [PATCH 1/2] fix(vue): Make Clerk component options reactive

---
 .../vue/src/components/ClerkHostRenderer.ts   | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/vue/src/components/ClerkHostRenderer.ts b/packages/vue/src/components/ClerkHostRenderer.ts
index 5528dc5945c..e3e9f692837 100644
--- a/packages/vue/src/components/ClerkHostRenderer.ts
+++ b/packages/vue/src/components/ClerkHostRenderer.ts
@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import { defineComponent, h, onScopeDispose, ref, toRef, watchEffect } from 'vue';
+import { defineComponent, h, onUnmounted, ref, watch, watchEffect } from 'vue';
 
 import type { CustomPortalsRendererProps } from '../types';
 import { ClerkLoaded } from './controlComponents';
@@ -44,30 +44,35 @@ export const ClerkHostRenderer = defineComponent({
   },
   setup(props) {
     const portalRef = ref<HTMLDivElement | null>(null);
-    const isPortalMounted = ref(false);
-    // Make the props reactive so the watcher can react to changes
-    const componentProps = toRef(props, 'props');
+    let isPortalMounted = false;
 
     watchEffect(() => {
-      if (!portalRef.value) {
+      // Skip if portal element isn't ready or component is already mounted
+      if (!portalRef.value || isPortalMounted) {
         return;
       }
 
-      if (isPortalMounted.value) {
-        props.updateProps?.({ node: portalRef.value, props: componentProps.value });
-      } else {
-        if (props.mount) {
-          props.mount(portalRef.value, componentProps.value);
-        }
-        if (props.open) {
-          props.open(componentProps.value);
-        }
-        isPortalMounted.value = true;
+      if (props.mount) {
+        props.mount(portalRef.value, props.props);
+      }
+      if (props.open) {
+        props.open(props.props);
       }
+      isPortalMounted = true;
     });
 
-    onScopeDispose(() => {
-      if (isPortalMounted.value && portalRef.value) {
+    watch(
+      () => props.props,
+      newProps => {
+        if (isPortalMounted && props.updateProps && portalRef.value) {
+          props.updateProps({ node: portalRef.value, props: newProps });
+        }
+      },
+      { deep: true },
+    );
+
+    onUnmounted(() => {
+      if (isPortalMounted && portalRef.value) {
         if (props.unmount) {
           props.unmount(portalRef.value);
         }

From 726e92741acfa8b4ca9fd7e6792d0b9160ba8bf9 Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Wed, 20 Aug 2025 09:55:41 -0700
Subject: [PATCH 2/2] chore: add changeset

---
 .changeset/friendly-penguins-wash.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/friendly-penguins-wash.md

diff --git a/.changeset/friendly-penguins-wash.md b/.changeset/friendly-penguins-wash.md
new file mode 100644
index 00000000000..1688f16bd67
--- /dev/null
+++ b/.changeset/friendly-penguins-wash.md
@@ -0,0 +1,5 @@
+---
+"@clerk/vue": patch
+---
+
+Fixes an issue where deep updates to Clerk component options are not reactive.