Vue CLIで、イベントリスナーからメソッドを呼び出したい

前提・実現したいこと

Vue CLIでwebサイトを制作しています。制作している中で、templete内に記述したボタンのクリックを、mounted内に記述したEventListenerで検知して、methods内に記述してあるmethodを呼び出す必要が出てきたので、それを実現したいと考えています。

発生している問題・エラーメッセージ

ボタンを押しても、alert("hello")が実行されませんでした。下はエラーメッセージです。

Uncaught TypeError: this.sayHello is not a function

該当のソースコード

vue
1<template>
2<div>
3    <button id="btn">ボタン</button>
4</div>
5</template>
6
7<script>
8export default {
9    methods:{
10        sayHello(){
11            alert("hello");
12        }
13    },
14    mounted(){
15        var btn = document.getElementById('btn');
16        btn.addEventListener('click', function() {
17            alert("clicked");
18            this.sayHello();
19        }, false);
20    }
21};
22</script>

試したこと

上のプログラムにもあるように、alert("clicked")を追加しました。すると、alert("clicked")は無事に実行されたのですが、やはりalert("hello")は実行されず、エラーが出てしまいます。だから、問題はthis.sayHello()の部分にあると考え、mounted内にthis.sayHello()を追加しました。その結果、サイトを読み込んだ時にalert("hello")は実行されたのですが、ボタンを押しても反応はなく、エラーが出てしまいます。
制作しているサイトでは、直接メソッドを呼び出すことが出来ないので、どうにかして、イベントリスナーを経由したいです。
一番の原因は僕の知識不足だと思うのですが、どうか教えていただけるとありがたいです。

補足情報（FW/ツールのバージョンなど）

Vue ^2.6.11

行動規範の内容に同意します

回答1件

自己解決

Vue
1<template>
2<div>
3    <button id="btn">ボタン</button>
4</div>
5</template>
6
7<script>
8export default {
9    methods:{
10        sayHello(){
11            alert("hello");
12        }
13    },
14    mounted: function(){
15        var btn = document.getElementById('btn');
16        btn.addEventListener('click', this.sayHello);
17    },
18    // destroyed: function(){
19    //     var btn = document.getElementById('btn');
20    //     btn.removeEventListener("click",this.sayHello);
21    // }
22};
23</script>