Vue 3 Composition API menyediakan dua cara membuat data reaktif:

ref() — Untuk Nilai Primitif

const count = ref(0)
const name = ref("Budi")

// Akses/ubah di script: .value
// count.value++
// Di template: otomatis unwrap

---template---
<p>{{ count }}</p>
<p>{{ name }}</p>

reactive() — Untuk Object/Array

const state = reactive({
  name: "Budi",
  age: 25,
  hobbies: ["coding", "gaming"]
})

// Akses langsung tanpa .value
// state.name = "Andi"

---template---
<p>{{ state.name }} ({{ state.age }})</p>

Kapan Pakai Apa?

• ref() — string, number, boolean, atau saat butuh reassign keseluruhan
• reactive() — object dengan banyak property