Vue.js: How do you use custom hooks?

1// composables/useFetch.ts
2import { ref, watchEffect } from "vue"
3
4export function useFetch(url) {
5  const data = ref(null)
6  const error = ref(null)
7  const loading = ref(true)
8
9  watchEffect(async () => {
10    try {
11      data.value = await fetch(url).then(r => r.json())
12    } catch (e) {
13      error.value = e
14    } finally {
15      loading.value = false
16    }
17  })
18
19  return { data, error, loading }
20}

1<script setup>
2import { useFetch } from "@/composables/useFetch"
3
4const { data, loading } = useFetch("/api/users")
5</script>