Baik, sekarang kita mulai masuk ke “dapur” Vue.js—bagian dasar yang justru paling sering dipakai di project Laravel + Inertia + Vue.

Meskipun terlihat sederhana, konsep di materi ini akan terus dipakai ke depan, terutama saat kita mulai membuat form, validasi, dan interaksi dengan backend. Jadi penting banget untuk benar-benar paham di tahap ini.

Apa yang Akan Kita Pelajari?

Di sesi ini, kita akan fokus ke tiga konsep inti:

• Cara menyimpan data reaktif di Vue
• Cara menampilkan data ke tampilan
• Cara menghubungkan input dengan data secara otomatis

Kalau tiga ini sudah paham, kamu sudah punya fondasi kuat untuk lanjut ke level berikutnya.

State di Vue: Menggunakan ref()

Di Vue 3 (terutama dengan Composition API), kita tidak lagi menggunakan data() seperti versi lama. Sebagai gantinya, kita pakai ref() untuk membuat data yang reaktif.

Contoh paling sederhana:

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

const nama = ref('Kurnia Andi')
</script>

<template>
  <p>Nama saya: {{ nama }}</p>
</template>

Intinya:

• ref() digunakan untuk menyimpan nilai
• Nilai tersebut bersifat reaktif
• Saat nilainya berubah, tampilan ikut update otomatis

Ini yang bikin Vue terasa “hidup”.

Menampilkan Data: Interpolasi {{ }}

Untuk menampilkan data di Vue, kita gunakan sintaks kurung kurawal ganda:

<p>Halo, {{ nama }}</p>

Ini disebut interpolasi.

Vue akan langsung mengganti {{ nama }} dengan nilai yang ada di variabel nama. Jadi kalau nama = "Andi", hasilnya:

Halo, Andi

Simple, tapi ini adalah dasar dari semua rendering di Vue.

Menghubungkan Input: v-model

Sekarang kita buat sedikit lebih interaktif.

Kalau kita punya input, dan ingin nilainya langsung terhubung ke variabel, kita gunakan v-model.

<input type="text" v-model="nama" placeholder="Masukkan nama">
<p>Halo, {{ nama }}</p>

Yang terjadi di sini:

• Saat user mengetik → nilai nama berubah
• Saat nama berubah → tampilan ikut update

Ini disebut two-way binding (binding dua arah).

Jadi kita tidak perlu lagi menangani event manual seperti onChange—semuanya otomatis.

Contoh Mini: Halaman Interaktif

Sekarang kita coba gabungkan semuanya dalam satu contoh sederhana.

Buat file baru: resources/js/Pages/Hello.vue

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

const nama = ref('')
</script>

<template>
  <div class="p-4">
    <h1 class="text-xl font-bold mb-2">Coba Input Nama</h1>

    <input 
      v-model="nama" 
      type="text" 
      class="border px-2 py-1 rounded" 
      placeholder="Ketik nama di sini..."
    >

    <p class="mt-2">Halo, {{ nama }} </p>
  </div>
</template>

Lalu tambahkan route di Laravel:

use Inertia\Inertia;

Route::get('/hello', function () {
    return Inertia::render('Hello');
});

Sekarang buka di browser:

http://localhost:8000/hello

Setiap kamu mengetik di input, teks di bawahnya langsung berubah. Tanpa reload, tanpa JavaScript manual—semua ditangani Vue.

Ringkasan Singkat

Dari sini, kita bisa tarik tiga poin penting:

1. ref() → menyimpan data reaktif
2. {{ }} → menampilkan data ke tampilan
3. v-model → menghubungkan input dengan data

Kesimpulan

Konsep ini mungkin terlihat dasar, tapi justru inilah “nyawa” dari Vue. Hampir semua fitur lanjutan—form validation, dynamic UI, bahkan komunikasi ke backend—berdiri di atas konsep ini.