Vueでiframe内の要素を操作したい

前提・実現したいこと

Vueの<iframe>内で表示されている要素にアクセスして、クリックイベントなどの関数を追加し、ボタンがクリックされたらページ移動などの操作をしたい

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

textContentで要素の中身を確認できることはあるが、（できないときもある）addEventListenerで関数を追加しても、その関数処理が呼ばれない

該当のソースコード

html
1<template>
2   <div>
3     <iframe
4       id="element"
5       ref="iframe"
6       :src="'https://アクセスしたいページ'"
7      />
8  </div>
9</template>

ts
1
2<script lang="ts">
3import { defineComponent, ref, watch } from '@nuxtjs/composition-api';
4
5export default defineComponent({
6  setup() {
7    const iframe = ref<HTMLIFrameElement>();
8
9    // iframe要素をwatchする
10    watch(iframe, async (iframe) => {
11      const waitForIframeLoaded = () =>
12        new Promise<void>((resolve) => {
13          if (!iframe || !iframe.contentDocument) {
14            return resolve();
15          }
16          if (iframe.contentDocument.readyState === 'complete') {
17            return resolve();
18          }
19          iframe.addEventListener('load', () => resolve());
20        });
21      await waitForIframeLoaded();
22      if (!iframe || !iframe.contentDocument) {
23        return;
24      }
25      const { contentDocument } = iframe;
26
27      const handleClick = (event: Event) => {
28        event.preventDefault();
29        // ここが呼ばれない
30        console.log('叩かれました');
31      };
32      // ここは表示されたりされなかったり
33      console.log(
34        '要素はありますか？' + contentDocument.getElementsByClassName('iframe内の要素のクラス名')[0].textContent
35      );
36      contentDocument.getElementsByClassName('iframe内の要素のクラス名')[0].addEventListener('click', handleClick);
37    });
38    return {
39      iframe,
40    };
41  },
42});
43</script>