Vue勉強 監視プロパティwatch

(Vue.js 3.1.5を使用)
監視プロパティwatch
・プロパティを監視しておいて、そのプロパティに変更があった場合に何らかの処理をさせる。

watchは、ウォッチャーと呼ぶのかな？
公式サイトでは、ウォッチャーと書いてあるよう。

watchでプロパティを監視して、v-model(双方向バインディング)で、ブラウザ上のデータとvueのデータを連動させる例。

javascript

const app = Vue.createApp({
    data: () => ({
        meter: 0,
        kmeter:0
    }),
    watch:{
        meter: function(value){            
            this.meter = value
            this.kmeter = value / 1000
        },
        kmeter: function(value){
            this.kmeter = value
            this.meter = value * 1000
        }
    }
})
app.mount('#app')

html

    <div id="app">
        <p>メートル: <input type="text" v-model="meter"> </p>
        <p>キロメートル: <input type="text" v-model="kmeter"> </p>
    </div>

初期状態

メートル欄に 5000 を入力すると、
キロメートル欄に、5 が自動で入る。

キロメートル欄に 100 を入力すると、
メートル欄に、100000 が自動で入る。