Vue.js debounce 사용시 this 객체 Cannot read properties

debounce를 사용 하여 함수를 만들었을 때 this 객체를 찾지 못하는 오류가 발생할 경우가 있다.

평소처럼 코딩 하던중 아래 예제 처럼 this 를 사용 하였는데 에러가 발생하였다.

이유는 화살표 함수 표현(arrow function expression) 에 대한 정의를 보면 알기 쉬운데
코딩하다보면 항상 까먹고 편한대로 하다가 왜 에러가 나지 .. 하고 있다가 아차 한다 ..
다들 비슷할 것 같아 글로 남겨 본다

참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

만약 아래와 같이 작성 후 오류가 난다면 아래의 구문처럼 일반 함수 표현식으로 변경하면 쉽게 사용이 가능하다.

// $emit Cannot read properties error 구문
    tmpSave: debounce((val, key) => {
      localStorage.setItem(key, val);
      this.$emit('auto-save', 'done');
    }, 1000),
      
 // 일반 함수 표현식으로 수정 
    tmpSave: debounce(function (val, key) {
      localStorage.setItem(key, val);
      this.$emit('auto-save', 'done');
    }, 1000),