펑션을 한 depth 더 들어가면 $호출이 안되는 이유가 뭘까요?

<AUIGrid ref="fileGrid" class="grid-wrap"
         style="height:35vh"
>
</AUIGrid>

선언 후 

삭제시 함수를 호출하도록 해두었습니다.

async goDeleteFile(event) {
  console.log('삭제@!!!!', event.item)
  this.$message.success(`파일삭제 완료`); // 호출가능

  this.$confirm({
    title: '첨부를 삭제하시겠습니까?',
    // content: 'Bla bla ...',
    okText: '확인',
    cancelText: '취소',
    onOk() { // 이곳만 들어가면 $또는 $refs 접근이 불가능해짐
      deleteFile({file_seq: event.item.file_seq}).then(
          (res) => {
            console.log('res====', res)
            if (res.code == 200) {
              console.log('삭제후 들어왔습니다.!@!@!@@!@!@!@!')
              this.$refs.fileGrid.clearGridData() //호출 불가
              this.$message.success(`파일삭제 완료`); //호출 불가
            } else {
              this.$message.error(res.message);
            }
            //return res.data;
          },
          error => {
            console.log('error ==== ', error)
          }
      )
    }
  })
}

같은 내장 라이브러리 인 this.$message.success() 인데 goDeleteFile 함수안에서 바로 호출하면
호출이 되고 onOk() 펑션 안에서는 접근이 아예 안되는 이유 모르겠네요.

혹시 제가 vue의 사상을 이해하지 못하고 쓰는 것 같아 질문을 남겨봅니다.