Composable Pattern

const data = ref(null)
const loading = ref(true)
const error = ref(null)

onMounted(async () => {
  try {
    const res = await fetch("https://api.example.com/data")
    data.value = await res.json()
  } catch (e) {
    error.value = e.message
  } finally {
    loading.value = false
  }
})

---template---
<div>
  <p v-if="loading" id="status">Memuat...</p>
  <p v-else-if="error" id="status">Error: {{ error }}</p>
  <div v-else id="status">Data siap!</div>
</div>

Reusable useFetch

function useFetch(url) {
  const data = ref(null)
  const loading = ref(true)
  const error = ref(null)

  onMounted(async () => {
    try {
      const res = await fetch(url)
      data.value = await res.json()
    } catch (e) {
      error.value = e.message
    } finally {
      loading.value = false
    }
  })

  return { data, loading, error }
}