Get your own Vue server
  <h2>Example $watch() Method</h2>
  <p>The watcher is set up to watch '' and will therefore detect when the country is changed inside the 'value' object.</p>
    <p>Register a new country for Stuart to live in:</p>
    <p><input type="text" v-model="inpVal"></p>
    <button v-on:click="regHobby">Register</button>
      <li v-for="x in watchMessages">{{ x }}</li>
  <p>Current 'value' object:</p>
  <pre>{{ this.value }}</pre>

export default {
  data() {
    return {
      inpVal: null,
      value: {
        owner: 'Stuart',
        address: 'Faraway Lane',
        country: 'Mexico'
      watchMessages: []
  methods: {
    regHobby() { = this.inpVal;
      this.inpVal = null;
  mounted() {
    this.$watch('', function () {
      this.watchMessages.push('watcher triggered')

<style scoped>
div {
  border: solid black 1px;
  padding: 10px;
li {
  background-color: lightgreen;
import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)