From e5a156f079459c12ec1012f859611294f734966f Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 1 Feb 2024 10:19:26 -0800
Subject: [PATCH 1/2] feat: add organization list component

---
 src/components/OrganizationList.vue  | 21 +++++++++++++++++++++
 src/composables/useMountComponent.ts |  4 ++--
 2 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 src/components/OrganizationList.vue

diff --git a/src/components/OrganizationList.vue b/src/components/OrganizationList.vue
new file mode 100644
index 00000000..7f46d6d9
--- /dev/null
+++ b/src/components/OrganizationList.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { SignInProps } from '@clerk/types'
+import { ref } from 'vue'
+import { useMountComponent } from '../composables/useMountComponent'
+import { useClerk } from '../composables/useClerk'
+
+const props = defineProps<SignInProps>()
+const el = ref<HTMLDivElement | null>(null)
+const clerk = useClerk()
+
+useMountComponent({
+  el,
+  mountFn: clerk.mountOrganizationList,
+  unmountFn: clerk.unmountOrganizationList,
+  props,
+})
+</script>
+
+<template>
+  <div ref="el" />
+</template>
diff --git a/src/composables/useMountComponent.ts b/src/composables/useMountComponent.ts
index b482d92e..3f7fb133 100644
--- a/src/composables/useMountComponent.ts
+++ b/src/composables/useMountComponent.ts
@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import { watchPostEffect } from 'vue'
+import { watchEffect } from 'vue'
 import { useClerkProvide } from './useClerkProvide'
 
 /**
@@ -24,7 +24,7 @@ export function useMountComponent({
 }) {
   const { isClerkLoaded } = useClerkProvide()
 
-  watchPostEffect((onInvalidate) => {
+  watchEffect((onInvalidate) => {
     if (el.value && isClerkLoaded.value)
       mountFn(el.value, props)
 

From bf42a21e1b48c7abd62b8023f51b9b61914c95d2 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 1 Feb 2024 10:25:54 -0800
Subject: [PATCH 2/2] use organization list props

---
 src/components/OrganizationList.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/OrganizationList.vue b/src/components/OrganizationList.vue
index 7f46d6d9..be7c5b73 100644
--- a/src/components/OrganizationList.vue
+++ b/src/components/OrganizationList.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { SignInProps } from '@clerk/types'
+import type { OrganizationListProps } from '@clerk/types'
 import { ref } from 'vue'
 import { useMountComponent } from '../composables/useMountComponent'
 import { useClerk } from '../composables/useClerk'
 
-const props = defineProps<SignInProps>()
+const props = defineProps<OrganizationListProps>()
 const el = ref<HTMLDivElement | null>(null)
 const clerk = useClerk()