Problem

I'm trying to dynamically create a clickable image in a d3.js network (using svg elements) in a Vue component method like this :

<g>
  <a xlink:href="[go_to_another_vue]">
    <image x="-15" y="-15" height="25" width="25" xlink:href="image.png"></image>
  </a>
</g>

I'm using vue 2.6.11, router 3.5.2, vuetify 2.5.8

Question

How to use Vue router to navigate to another view in this kind of dynamically generated link ?

I found another post with an answer that should work : How to access Vue Component from plain vanilla DOM and tried to set the href attribute to javascript:app.__vue__.$router.push({path:'[path_to_another_vue]'}) :

...
const node = svg
  .append("g")
  .selectAll("g")
  .data(nodes)
  .join("g")
  .call(drag(simulation));
node
  .append("a")
  .attr("xlink:href", (d) => `javascript:app.__vue__.$router.push({path:'${this.$route.path}/${d.url}'})`)        
  .append("image")
  .attr("x", -15)
  .attr("y", -15)
  .attr("height", 25)
  .attr("width", 25)
  .attr("xlink:href", (d) => d.image);

But the app.__vue__.$router.push(...) solution doesn't work for me. It changes the current location (window.location.href is ok) but I get a blank page, nothing is loaded, no network activity/no error in devtools.

Any idea of what's wrong ?