กลุ่ม	ฟังก์ชัน	คำอธิบาย
Reactive Data	ref()	ใช้สำหรับสร้าง reactive references ที่สามารถเป็นค่าต่างๆ เช่น primitive values
	reactive	ใช้สำหรับสร้าง reactive objects ที่สามารถเป็น objects หรือ arrays
	readonly()	สร้าง reactive objects ที่ไม่สามารถเปลี่ยนแปลงค่าได้
Computed Values	computed()	ใช้สำหรับสร้าง computed properties ที่คำนวณค่าอัตโนมัติจาก reactive data
Effect Tracking	watchEffect()	ใช้สำหรับติดตามและตอบสนองต่อการเปลี่ยนแปลงของ reactive data อัตโนมัติ
	watchPostEffect()	ใช้สำหรับติดตามการเปลี่ยนแปลงหลังจาก DOM updates
	watchSyncEffect()	ใช้สำหรับติดตามการเปลี่ยนแปลงอย่างทันทีและซิงค์กับ DOM updates
	watch()	ใช้สำหรับติดตามการเปลี่ยนแปลงของค่าเฉพาะและเรียกใช้ callback เมื่อค่าที่ติดตามเปลี่ยนแปลง

ref()

ใช้สร้างการอ้างอิงที่สามารถเปลี่ยนแปลงค่าได้ (reactive reference)

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

computed()

ใช้สร้างค่าที่คำนวณจากค่าอื่น ๆ โดยอัตโนมัติ

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed(() => {
  return firstName.value + ' ' + lastName.value
})
</script>

<template>
  <p>Full name: {{ fullName }}</p>
</template>

reactive()

ใช้สร้างออบเจ็กต์ที่สามารถตรวจจับการเปลี่ยนแปลงได้ (reactive object)

<script setup>
import { reactive } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello'
})

function increment() {
  state.count++
}
</script>

<template>
  <button @click="increment">Count: {{ state.count }}</button>
  <p>{{ state.message }}</p>
</template>

readonly()

ใช้สร้างออบเจ็กต์ที่ไม่สามารถแก้ไขได้ (read-only proxy)

<script setup>
import { reactive, readonly } from 'vue'

const original = reactive({ count: 0 })
const copy = readonly(original)

// This will work
original.count++

// This will fail and raise a warning
copy.count++ // warning! 
</script>

watchEffect()

ใช้ติดตามและทำงานอัตโนมัติเมื่อมีการเปลี่ยนแปลงของข้อมูล

<script setup>
import { ref, watchEffect } from 'vue'

const count = ref(0)

watchEffect(() => {
  console.log(`Count changed to: ${count.value}`)
})

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Increment</button>
</template>

watchPostEffect()

คล้ายกับ watchEffect แต่จะทำงานหลังจาก DOM อัพเดทเสร็จแล้ว

<script setup>
import { ref, watchPostEffect } from 'vue'

const count = ref(0)

watchPostEffect(() => {
  console.log(`DOM updated. Count is now: ${count.value}`)
})

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Increment</button>
</template>

watchSyncEffect()

คล้ายกับ watchEffect แต่จะทำงานพร้อมกับ component render

<script setup>
import { ref, watchSyncEffect } from 'vue'

const count = ref(0)

watchSyncEffect(() => {
  console.log(`Synced with render. Count: ${count.value}`)
})

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Increment</button>
</template>

watch()

ใช้ติดตามการเปลี่ยนแปลงของข้อมูลเฉพาะที่ระบุ

<script setup>
import { ref, watch } from 'vue'

const question = ref('')
const answer = ref('Questions usually contain a question mark. ;-)')

watch(question, (newQuestion, oldQuestion) => {
  if (newQuestion.indexOf('?') > -1) {
    answer.value = 'Thinking...'
    // ในที่นี้คุณอาจจะเรียก API หรือทำการคำนวณบางอย่าง
  }
})
</script>

<template>
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</template>