<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')