Vue.jsで$routerを呼び出すときのthisが使えない

Question

canvas要素をクリックした時に$routerでページ遷移する処理を書いています。

現状
vue.js をtypescriptで書いていますが、$routerを使うタイミングでthisに対してエラーが出ています。
thisに対してanyの型

'this' implicitly has type 'any' because it does not have a type annotation.Vetur(2683)

<template>
  <div class="container">
    <canvas id="myCanvas"></canvas>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class EarthMap extends Vue {
  mounted(): void {
    this.init()
  }
  init() {
    const canvasElement: HTMLCanvasElement = <HTMLCanvasElement>document.querySelector('#myCanvas')
    canvasElement.addEventListener('click', handleMouseMove);

    function handleMouseMove(event: any) {
      this.$router.push('Home')
    }
  }
}
</script>

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

いくつか参考にしながら試してみましたがうまくいきませんでした。
https://stackoverflow.com/questions/41944650/this-implicitly-has-type-any-because-it-does-not-have-a-type-annotation

どなたか詳しい方、参考になるサイトを知っているかた、居ましたらご教授いただきたいです。
よろしくお願いします。

追記
https://qiita.com/eyuta/items/34fe3183f75afcd7eb12#noimplicitthis
https://www.typescriptlang.org/tsconfig#noImplicitThis
https://qiita.com/ryokkkke/items/390647a7c26933940470#noimplicitthis

Answer 1

結論　無名関数に変更する

function click_pin(): void {} 
上記を下記に変更
const click_pin = () => {}

参考 https://future-architect.github.io/typescript-guide/function.html

もっと早く疑うべきでした。

Answer 2

もしかしたらもう試されているかもしれませんが、
下記はいかがでしょうか？

function handleMouseMove(this: any, event: any) {
      this.$router.push('Home')
}

Comments

[tenlife]

m2lさん、回答ありがとうございます。
試してみましたが、うまくいきませんでした。

cosole.logで確認したところ、thisがundefinedになってしまっているのが原因かと思っています。

[m2l]

そうなんですね。
mountedではthis使える形ですか？
それであれば、あまり良いやり方かはわかりませんが、
下記はいかがでしょう？
-------------------------------
// 引数追加する
this.init(this)
-------------------------------
// 引数を入れる
init(this: any) {
const canvasElement: HTMLCanvasElement = <HTMLCanvasElement>document.querySelector('#myCanvas')
canvasElement.addEventListener('click', handleMouseMove);

function handleMouseMove(event: any) {
this.$router.push('Home')
}
}
------------------------------------------

[tenlife]

コメントありがとうございます！
結論、無名関数を使用するとthisが使用できるようになりました!
function click_pin(): void {} から下記に変更
const click_pin = () => {}

コメントのおかげで、怪しい部分に気づけました。
ありがとうございました。
参考 https://future-architect.github.io/typescript-guide/function.html

[m2l]

よかったです！（うまく回答できなくて申し訳ないです。。）