[Vue.js] 컴포넌트의 데이터가 변경되는걸 watch 하는법

구글을 찾아봐도 내가 검색을 못하는건지 잘 안나오는거 같음.  내가 원하는건 컴포넌트의 값이 변경될 경우,

체크될 때 값을 체크해서 뭔가를 띄워주거나 하고 싶은건데 찾아도 watch를 검색하면 프로퍼티를 이용하는 방법만 나오더라. 그래서 대충 아무거나 해보던 와중에 발견한거임.

 

그냥 mounted 에서 this.$watch 함수를 이용해서 내가 원하는 데이터를 셋팅해주고 콜백 넣으니까 되더라 ㅋ

사실 제대로 이해하고 만든게 아니라 그냥 참조만 할것

template: '<input type="text" v-model="Data.name" />'

data: function(){
	return {
    	data1 : "",
        
        Data: {
        	name: ""
        }
    }
},
mounted: function () {
	this.$watch('Data.name', function (newVal, old) {
		console.log("new : " + newVal + " old : " + old);
	});
},