Baik, di sesi ini kita akan membahas dua fitur yang sering banget dipakai saat aplikasi mulai “naik level”: computed dan watch.

Keduanya sama-sama berhubungan dengan reaktivitas di Vue, tapi punya tujuan yang berbeda. Supaya nggak bingung, kita bahas pelan-pelan—bukan cuma cara pakainya, tapi juga kapan sebaiknya digunakan.

Computed: Menghasilkan Nilai Otomatis

Bayangkan kita punya dua data: nama depan dan nama belakang. Lalu kita ingin menampilkan nama lengkap tanpa harus menggabungkan secara manual setiap saat.

Di sinilah computed jadi solusi.

Implementasi di Laravel + Inertia

1. Tambahkan Route

Di routes/web.php:

use Inertia\Inertia;

Route::get('/form-nama', function () {
    return Inertia::render('FormNama');
});

2. Buat Halaman FormNama.vue

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

const firstName = ref('Kurnia')
const lastName = ref('Andi')

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

<template>
  <div class="p-8 max-w-lg mx-auto">
    <h1 class="text-2xl font-bold mb-4">Form Nama</h1>

    <input v-model="firstName" class="border p-2 w-full mb-2" placeholder="Nama Depan" />
    <input v-model="lastName" class="border p-2 w-full mb-2" placeholder="Nama Belakang" />

    <p><strong>Nama Lengkap:</strong> {{ fullName }}</p>
  </div>
</template>

3. Hasilnya

Saat kamu mengubah input:

• firstName atau lastName berubah
• fullName otomatis ikut update

Tanpa kita tulis ulang logika penggabungan.

Itulah kekuatan computed.

Kenapa Harus Computed?

• Tidak dihitung ulang terus-menerus
• Hanya update saat data asal berubah
• Cocok untuk “data turunan”

Contoh penggunaan:

• Nama lengkap
• Total harga
• Status aktif / tidak

Watch: Merespons Perubahan

Kalau computed fokus ke menghasilkan nilai, maka watch fokus ke aksi.

Artinya, ketika data berubah → kita melakukan sesuatu.

Studi Kasus: Cek Usia

1. Route

Route::get('/form-usia', function () {
    return Inertia::render('FormUsia');
});

2. File FormUsia.vue

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

const usia = ref(17)

watch(usia, (newVal) => {
  if (newVal >= 18) {
    console.log('Sudah dewasa')
  } else {
    console.log('Belum dewasa')
  }
})
</script>

<template>
  <div class="p-8 max-w-lg mx-auto">
    <h1 class="text-2xl font-bold mb-4">Form Usia</h1>

    <input 
      type="number" 
      v-model="usia" 
      class="border p-2 w-full"
    />

    <p class="mt-4">
      Status:
      <span v-if="usia >= 18">Dewasa</span>
      <span v-else>Belum Dewasa</span>
    </p>
  </div>
</template>

3. Apa yang Terjadi?

Setiap kali nilai usia berubah:

• Fungsi watch() akan terpanggil
• Logika dijalankan (misalnya logging, validasi, dll)

Jadi watch itu seperti “pengawas” yang selalu siap bereaksi.

Kapan Pakai Computed vs Watch?

Supaya gampang, pakai logika ini:

Gunakan computed jika:

• Ingin menghasilkan nilai baru
• Tidak ada efek samping
• Hanya untuk kebutuhan tampilan

Gunakan watch jika:

• Ingin menjalankan aksi
• Ada efek samping

Contoh Efek Samping watch

• Validasi input realtime
• Auto save ke server
• Hit API saat data berubah
• Menampilkan notifikasi
• Logging/debugging

Ringkasan

• computed → untuk menghitung nilai turunan
• watch → untuk merespons perubahan dengan aksi

Penutup

Kalau diibaratkan:

• Computed = kalkulator otomatis
• Watch = sensor yang bereaksi saat ada perubahan

Keduanya sama-sama penting, tapi digunakan untuk tujuan yang berbeda.

Saat coding nanti, cukup tanya ke diri sendiri:

“Saya butuh nilai baru, atau butuh reaksi dari perubahan?”

Dari situ, kamu sudah tahu harus pakai yang mana