Vue: how to implement binding loaded svg with data?

Question

Vue.js

Good day!
Please tell me how to implement the task.
There are many SVG schemes.
In the module, the user selects a value, and the corresponding schema is loaded.
After that, I want to make the circuit interactive.
If we immediately loaded the vue module, it would look like this:

<svg>
  <g id='firstPartOfScheme'>
    <paht id='firstPath1' class='a lot of classes' :class='isSelected(1)' @click='onClick(1)'></path>
    <paht id='firstPath2' class='a lot of classes' :class='isSelected(2)' @click='onClick(2)'></path>
  </g>
  <g id='secondPartOfScheme'>
    <paht id='secondPath1' class='a lot of classes' :class='isPreview(1)'></path>
    <paht id='secondPath2' class='a lot of classes' :class='isPreview(2)'></path>
  </g>
</svg>

But what if we only have bare circuits, how to make them interactive?

Answer 1

You need to make them into vue components dynamically. There is a small article, some of which can help you: https://habr.com/en/post/345814/