Merge pull request #16 from wobsoriano/organization-list

src/components/OrganizationList.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { OrganizationListProps } from '@clerk/types'
+import { ref } from 'vue'
+import { useMountComponent } from '../composables/useMountComponent'
+import { useClerk } from '../composables/useClerk'
+
+const props = defineProps<OrganizationListProps>()
+const el = ref<HTMLDivElement | null>(null)
+const clerk = useClerk()
+
+useMountComponent({
+  el,
+  mountFn: clerk.mountOrganizationList,
+  unmountFn: clerk.unmountOrganizationList,
+  props,
+})
+</script>
+
+<template>
+  <div ref="el" />
+</template>

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)