请教一个 Vue.js 动态加载外部 html 的事件处理问题

需求是这样的

Vue 单页 app，app 首页用户需要自定义，内容是后台用户编辑的，前端通过 api 来获取用户后台编辑的内容，api 返回 html 格式。

现在需要在前端输出 html 的时候，处理 html 中的所有链接，捕获默认的点击事件，转换成 Vue-route 的本地事件，跳到对应的路由页面。

网上已经找到一位老哥的代码了( https://dennisreimann.de/articles/delegating-html-links-to-vue-router.html )，思路如下：

    <div
      class="imgs content"
      v-html="app.home"
    />

mounted () {
  window.addEventListener('click', event => {
    const { target } = event
    // handle only links that do not reference external resources
    if (target && target.matches("a:not([href*='://'])") && target.href) {
      // some sanity checks taken from vue-router:
      // https://github.com/vuejs/vue-router/blob/dev/src/components/link.js#L106
      const { altKey, ctrlKey, metaKey, shiftKey, button, defaultPrevented } = event
      // don't handle with control keys
      if (metaKey || altKey || ctrlKey || shiftKey) return
      // don't handle when preventDefault called
      if (defaultPrevented) return
      // don't handle right clicks
      if (button !== undefined && button !== 0) return
      // don't handle if `target="_blank"`
      if (target && target.getAttribute) {
        const linkTarget = target.getAttribute('target')
        if (/\b_blank\b/i.test(linkTarget)) return
      }
      // don't handle same page links/anchors
      const url = new URL(target.href)
      const to = url.pathname
      if (window.location.pathname !== to && event.preventDefault) {
        event.preventDefault()
        this.$router.push(to)
      }
    }
  })
}

本地调试的时候发现一个问题，api 返回的 html 是类似这样的

<a href="/xxx">
  <img src="/bbb">
</a>

在上例中，我在事件开始输出 log，获取到的一直是 img 标签，而不是 a 标签，这也导致上面后续逻辑无法执行。

mounted () {
  window.addEventListener('click', event => {
    const { target } = event
    console.log(target)

看起来不是一个大问题，浪费了一晚上时间还没有解决。：（我承认前端我接触太少，js 基础功力还要加强，希望有这方面经验的大佬给一些指点，定重谢！