Vue Composable Reactivity

https://vuejs.org/api/reactivity-core.html

https://vuejs.org/guide/extras/reactivity-in-depth.html

import { useQuery } from '@tanstack/vue-query'
import { useAuthStore } from '~/store/useAuthStore'

export const useFetchAnnouncement = () => {
    const store = useAuthStore()

    return useQuery({
        queryKey: ['announcements'],
        queryFn: async ({ signal }) => {
            const res = await $fetch('/api/announcements', {
                signal,
                headers: {
                    Authorization: `Bearer ${store.token}`
                }
            })
            return res ?? []
        },
        enabled: () => !!store.token
    })
}