<template>
  <h2>Example $watch() Method</h2>
  <p>Register an extra hobby for Stuart. The hobbies are stored in an array inside the 'value' object. The $watch() method
    is triggered because the 'deep' option is set to 'true' so that the watcher also detects changes further inside the
    object.</p>
  <div>
    <p>Register an extra hobby for Stuart:</p>
    <p><input type="text" ref="inpText"></p>
    <button v-on:click="regHobby">Register</button>
    <ol>
      <li v-for="x in watchMessages">{{ x }}</li>
    </ol>
  </div>
  <p>Current 'value' object:</p>
  <pre>{{ this.value }}</pre>
</template>

<script>
export default {
  data() {
    return {
      value: {
        owner: 'Stuart',
        address: 'Faraway Lane',
        hobbies: ['Bird watching', 'Trail running']
      },
      watchMessages: []
    };
  },
  methods: {
    regHobby() {
      this.value.hobbies.push(this.$refs.inpText.value);
      this.$refs.inpText.value = null;
      this.$refs.inpText.focus();
    }
  },
  mounted() {
    this.$watch('value', function () {
      this.watchMessages.push('watcher triggered')
    }, {
      deep: true
    });
  }
};
</script>

<style scoped>
div {
  border: solid black 1px;
  padding: 10px;
}

li {
  background-color: lightgreen;
}</style>                  

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)
app.mount('#app')