Vueの監視プロパティを用いて表示を更新しようと思っているのですが、inputでテキストを変更した際、下記の{{ newMessage }}、{{ oldMessage }}部分が更新されません。({{ message }}部分は更新されます。)
初歩的な質問で恐縮ですがどのようにすれば動作するかお分かりになりましたら教えていただきたいです。
HTML
<p>
{{ message }} // inputに入れた値で更新される
{{ newMessage }} // nullのまま更新されない
{{ oldMessage }} // nullのまま更新されない
</p>
<input type="text" v-model="message" />
<pre>
{{ $data }} // newMessage、oldMessageの値が更新されない
</pre>
JavaScript
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
newMessage: '',
oldMessage: ''
},
watch: {
message: (newValue, oldValue) => {
this.newMessage = newValue
this.oldMessage = oldValue
console.log(this.newMessage, newValue) // 共に新しい値がコンソールで表示されている
}
}
})