When rendering a list of icons and setting dynamic text, it appears that the first item's property overrides all others.
Desired outcome:
https://i.sstatic.net/cOG0s.png
Actual outcome:
https://i.sstatic.net/e2XIT.png
Upon inspecting with Vue Devtools, it is confirmed that the correct props are passed to each image component.
Code:
<div>
<my-component v-for="item in items" :key="item.id" :label="item.number" />
</div>
My-component (only <tspan> tag and x attribute have been modified):
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="102"
height="102"
viewBox="0 0 102 102"
>
<defs>
<filter
id="7ojrpldaib"
width="117.9%"
height="127.7%"
x="-8.9%"
y="-13.9%"
filterUnits="objectBoundingBox"
>
... (omitted for brevity)
...