Vue.js 에서 컴포넌트 내 method에서 data에 접근할 수 없는 문제 발생

Vue.js 컴포넌트를 정의하던 중, 컴포넌트 내에 method에서 컴포넌트의 다른 메소드와 data의 값을 참조하려니 다음과 같은 오류가 떴다.

Uncaught TypeError: Cannot read property  of undefined

위의 문제는 여러 문제가 있을 수 있겠으나, 대부분은 ES6의 Arrow function을 써서 생기는 문제이다.

나의 경우 querySearch라는 method를 아래와 같은 방법으로 써서 생긴 문제였다. 

methods: { querySearch: (queryString, cb) => { .... } }

위 코드를 

methods: { querySearch: function(queryString, cb) { .... } }

Arrow function을 자바스크립트 함수선언으로 바꾸니 오류가 사라졌다.

공식 레퍼런스에 따르면 원인은, Arrow function(화살표 함수)들은 부모 컨텍스트에 바인딩이 되기때문에, 

this로 참조하는 Vue 컴포넌트의 인스턴스에서는  접근할 수 없다고 한다.

 + 현재 Vue.js 한글문서에서는 이에 대한 언급이 없어서 번역후 PR날릴 예정. ㅎㅎㅎ~~