title: How to manipulate a received svg (access '<g>' and '<rect>' elements) via vue
body: <p>I'm getting several SVG's that are all structured like this:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;svg&gt;
      ...
      &lt;g id="cabin"&gt;
          &lt;g id="1"&gt;
              &lt;g id="a"&gt;
                  &lt;rect /&gt;
                  &lt;path /&gt;
              &lt;/g&gt;
              &lt;g id="b"&gt;
                  &lt;rect /&gt;
                  &lt;path /&gt;
              &lt;/g&gt;
          &lt;/g&gt;
          &lt;g id="2"&gt;
              &lt;g id="a"&gt;
                  &lt;rect /&gt;
                  &lt;path /&gt;
              &lt;/g&gt;
              &lt;g id="b"&gt;
                  &lt;rect /&gt;
                  &lt;path /&gt;
              &lt;/g&gt;
          &lt;/g&gt;
          ...
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I'm loading the SVG via the <code>html-loader</code></p>
  
  <pre><code>&lt;div ref="plan" v-html="require('!html-loader!../assets/plaene/plan_1.svg')"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to access all child notes of <code>cabin</code> to change the <code>style</code> of the <code>rect</code> items. How should I do this? I tried this before in a single <code>html</code>-file with plain <code>javascript</code></p>
  
  <pre><code>var plan = document.getElementById("plan");
  plan.addEventListener("load",function() {
      dom = plan.contentDocument;
      let cabins = dom.getElementById('cabin');
      ...
      and so on
  </code></pre>
  
  <p>but I don't know how to do this in <code>vue</code>. I have read some articles (e.g. <a href="https://medium.com/js-dojo/vuejs-tips-best-practices-39d9962bb255" rel="nofollow noreferrer">VueJS — Tips &amp; Best Practices</a>) which say that you shold <strong>avoid manipulating the DOM directly</strong>, so I guess there must be something else.</p>
  
  <p>Has somebody a solution for this? 
  Thank you in advance!</p>