title: Changes from SVG files only reflect from the last executed SVG file
body: <p>I have 3 SVG files and I displaying those files by using <code>v-html=&quot;output_here&quot;</code> when SVG displayed, I will hide some of the elements of it, for example I will hide the path. What happened is the last rendered SVG file only changed.</p>
  <p>Output:
  <img src="https://i.stack.imgur.com/fdAK3.png" alt="enter image description here" />
  if you will see in the photo the &quot;inter 2&quot; only hide its PATH but the remaining 2 didn't hide the path.</p>
  <p>Note: 2 of the SVG files are same content and 1 is different &amp; the component is included inside loop</p>
  <p>Here's my code:</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
           &lt;div v-html=&quot;output_here&quot; v-if=&quot;output_here&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  mounted(){
   this.output_here = window.atob(data)
   setTimeout(() =&gt; {
          this.hideLantern()
   }, 1000)
  },
  methods: {
   hideLantern(){
         Object.keys(document.querySelectorAll(`#Signals`)[0].children).map(key =&gt;{
            let parent_id = document.querySelectorAll(`#Signals`)[0].children[key].id
            if (parent_id) {
                  document.getElementById(parent_id).style.display=&quot;none&quot;
            }
        })
   }
  }
  </code></pre>