Vue.js 3 Composition API ссылки из svg в router-link

У меня есть svg файл (карта оборудования), в котором есть ссылки на 3-д модели. Я хочу при клике по ссылке из svg файла открывать новый маршрут и подгружать свою 3-д модель, это работает с одним но - страница полностью перезагружается и дублируются все компоненты - то есть появляется 2 меню, 2 футера. Я считаю, что необходимо каким-то образом перехватить HTML ссылки из svg и переделать их в router-link. Единственное решение, которое смог найти https://dennisreimann.de/articles/delegating-html-links-to-vue-router.html , но у меня не получается его адаптировать и заставить работать.

В шаблоне подключаю svg через тег object

 <div class="grid">
    <div class="col-12 flex justify-content-center align-items-center princip-plan" @click="clickSVG">
        <object  type="image/svg+xml" :data="getModelBN800.link"> </object>
    </div>
</div>
<script>

export default {
    

    setup() {
        onMounted(() => {
        })

        const modelStore = useModelStore()
        const { getModelBN800 } = storeToRefs(modelStore)

        const clickSVG = (event) => {
            console.log(event)      
            let  target  = event
            while (target && target.tagName !== 'A') target = target.parentNode
            if (target && target.matches(".dynamic-content a:not([href*='://'])") && target.href) {
             if (button !== undefined && button !== 0) return
             if (target && target.getAttribute) {
                    const linkTarget = target.getAttribute('target')
                     if (/\b_blank\b/i.test(linkTarget)) return
                 }
                 const url = new URL(target.href)
                 const to = url.pathname
                 if (window.location.pathname !== to && event.preventDefault) {
                    event.preventDefault()
                     this.$router.push(to)
                 }
             }
        }

        return { getModelBN800, clickSVG }

    }
}
</script>

Сейчас функция clickSVG ни как не реагирует. Если я добавлю стиль pointer-events:none; к object тогда клик срабатывает, но target.tagName не находит ссылок, а только div на котором повешен клик. Если повесить клик на object, ни каких действий не происходит. Какие есть варианты решения моей задачи?

На основе решения Александра Сычева (ниже в комментариях). Я попытался адаптировать решение для себя и получаю ошибку Cannot read properties of null (reading 'contentDocument') .
Я создал функцию clickSVG2 и добавил ее в onMounted:

 onMounted(() => {
              
                clickSVG2()
            })   
const clickSVG2 = () => {
                window.addEventListener("load", () => {
                    // const a = ref(null)
                    // console.log(a.value)
                    const a = document.getElementById("Plan").contentDocument
                    const b = a.getElementById("svg4504")
                    const c = b.querySelectorAll("a")
                    c.forEach(i => {
                        i.addEventListener('click', (e) => {
                            e.preventDefault()
                            console.log(i)
                        })
                    })
                });
            }

Я добавил id="Plan" в object, а внутри моего svg файла id svg4504. Также я пытался повесить ссылку ref на object, но также безрезультатно. Также я должен сообщить, что не могу разместить svg inline, ибо файл является сложным и в нем 40К строк