Vueの中でclearTimeoutが効かなくてハマった話

setTimeout()をそのまま書いては解除できない

Vueの単一ファイルコンポーネント内でsetTimeout()、clearTimeout()を使う機会があったのですが、clearTimeout()が効かなくて2時間ほどハマってしまいました。

clearTimeout()で解除できない例

下記スクリプトでは解除されず、hogeと表示されます。

test.vue

<script>
const timer = setTimeout(() => {
  console.log('hoge');
}, 1000);

clearTimeout(timer);
</script>

window. を付ければ解除できる

下記のようにwindow.を付ければ解除できます。
こんな単純なことに2時間もハマって悔しい……！

test.vue

<script>
const timer = window.setTimeout(() => {
  console.log('hoge');
}, 1000);

window.clearTimeout(timer);
</script>