Karena dasarnya publikasi ini membahas Laravel secara khusus, mari kita anggap kita menggunakan Vue pada aplikasi yang berbasis framework Laravel.

Sebagai contoh, dalam berkas resources/assets/js/app.js terdapat Vue instance dan beberapa definisi data di dalamnya.

const app = new Vue({
  el: '#app',
  data: {
    name: 'Laravel',
    version: '0.1-alpha'
  }
});

Kemudian, kita mempunyai sebuah komponen yang ingin membaca data pada Vue instance di atas. Dari dalam skrip komponen, kita bisa menggunakan objek this.$root untuk membaca semua properti pada instance Vue (root) aplikasi.

Sebagai contoh, implementasinya untuk mengganti data name dan version pada root.

export default {
  mounted() {
    this.$root.$data = {
      name: 'Some Component',
      version: '1.0'
    }
  }
}

Jangan lupa untuk menggunakan spesial properti $data (bukan data) pada skrip.

console.log(this.$data);

Untuk melihat semua nilai dalam properti tersebut, kita bisa menggunakan logger dari JavaScript.