},
watch: {
inputStr(newValue, oldValue) {
console.log(`old value : ${oldValue}`);
console.log(`new value : ${newValue}`);
},
},
}
</script>
<template>
<input type="text" v-model="inputStr" />
</template>
예제 코드를 실행하고 웹 브라우저에서 개발자 도구(F12)를 엽니다. 입력 요소에 a를 적으면 v-model 디렉티브에 바인딩된 inputStr 데이터가 값이 변경되면서 watch 옵션 속성의 inputStr() 함수가 작동합니다. 콘솔을 확인하면 이전 값('')과 새로운 값(a)이 출력되는 것을 볼 수 있습니다.