useCollection not reactive

[ozgurdemir]

I followed the example in the docs to create a reactive collection:

export const useApplicationsStore = defineStore('applications', () => {
    const db = useFirestore()
    const user = useCurrentUser()

    const applications: Ref<Application[]> = useCollection<Application>(() =>
        user.value ? collection(db, 'users', user.value.uid, 'applications') : null
    )

    return {
        applications
    }

I'm doing the assignment in the onMounted hook:

onMounted(async () => {
    try {
        // this works fine
        applications = useCollection<Application>(() =>
            user.value ? collection(db, 'users', user.value.uid, 'applications') : null
        )

        // this does not
        applications = useApplicationsStore.applications

However, on logout / login the applications are empty on first visit. I have to leave and re-enter the page to populate the applications. This only happens in the above Pinia store case. When I do the assignment directly in the on mounted it works fine.

Am I missing something?

[ozgurdemir]

Argh after posting this I found the answer.

I need to use storeToRefs in order to keep Pinia reactivity

const { applications: apps } = storeToRefs(applicationsStore)