[vue] 화살표 함수와 This

풀스텍 개발자가 되기 위해서 프론트를 공부하던 중 오류가 생겼다.
회원가입 부분에서 비밀번호를 입력하고 자신이 비밀번호를 올바르게 입력했는지 확인하려고 했다.

-> watch를 통해 password2의 변화를 감지한다.
-> debounce를 통해 변화를 입력을 마치고 일정시간 이후에 검사를 실행한다.

시나리오는 괜찮게 설계한 것 같은데 debounce가 실행되지 않았다.

 <q-input v-model="password"
          label="비밀번호">
  
  <q-input v-model="password2"
           label="비밀번호 확인">
    
    <q-input v-model="password3"
           label="궁금증 확인중...">
        

export default {
    name: "test",
    watch:{
      password : function(val){
        console.log(this) // vue
        this.passwordCheck();
      },
      password2 :(val)=>{
        console.log(this) // undefined
        this.passwordCheck();
      }
      password3 : (val) =>{
  	function innerFunction(){
          console.log("innerFunction",this); // innerFunction undefined
          _.debounce(function(){
            console.log("innerFunction  _.debounce",this); // 호출하지 않는다.
          },500)
        }
        innerFunction();
      }
    },
    data(){
      return {
        password :'',
        password2 : '',
        password3 : '',
        pwIdentified : false,
      }
    },
    methods:{     
      passwordCheck:_.debounce(function(){
        console.log("비밀번호 검증!")
        if(this.password === this.password2) {
          this.pwIdentified = true;
          console.log("비밀번호가 같습니다.")
        }
        else{
          console.log("비밀번호가 다릅니다.")
          this.pwIdentified = false;
        }
      }, 500),

    },

테스트 결과 watch에서 함수를 실행할때 화살표 함수로는 vue 객체를 찾아내지 못했다. 화살표 함수 안에서 this는 vue가 아닌 다른 것을 가르키고 있었다.
위의 차이점에서 이어진듯 한데 화살표 함수안에서는 _.debounce를 실행하지 못했다. 구글링이 부족해서 아직 찾고있는 중이지만 vue와 js에 대한 기본적 이해가 늘어나면서 해결될 것같다.

오류를 만나면서 vue나 js가 어떻게 구동되는지 '체득'하고 있다. 아는 내용은 아는내용대로 모으고 모르는 내용을 기억하고 있으면 천천히 배경지식과 구조가 생성된다. 그다음 cs지식을 공부하면 궁금한 내용들이 해결되고 체득한 내용들을 알고 활용할 수 있게 될거라고 생각한다.

아무것도 모른체 이론만 공부하는게 지겨운 나한테 느리지만 효율적이지 않나 생각해본다.

고쳐쓰기 없이 갈겨쓰니 무슨말을 하고자 하는지싶다. 가독성 좋은 글을 쓰기 위해 노력해야겠다.