Imagine having two vue components:
parentComponent.vue
<template>
<svg>
<child-component v-for="i in ['a', 'b']" :key="i"/>
</svg>
</template>
...
childComponent.vue
<template>
<g>
//...some valid svg content
</g>
</template>
...
Although it functions well, there is a downside. In development mode, I receive a warning about mismatched nodes - looks like Vue has an issue with using svg elements. It might interfere during re-rendering. Any solutions to this?
Edit
After some research, it appears the problem could be related to how the canvas property is updated. Unable to replicate it in CodePen (perhaps due to different versions of Vue and logging levels), here's a live example: https://github.com/msdsk/so_svg_example