title: Vue.js and svg modules and mismatched nodes
body: <p>Let's say I have two vue modules:</p>
  
  <p><code>parentModule.vue</code></p>
  
  <pre><code>&lt;template&gt;
    &lt;svg&gt;
      &lt;child-module v-for="i in ['a', 'b']" :key="i"/&gt;
    &lt;/svg&gt;
  &lt;/template&gt;
  ...
  
  </code></pre>
  
  <p><code>childModule.vue</code></p>
  
  <pre><code>&lt;template&gt;
    &lt;g&gt;
      //...some valid svg content
    &lt;/g&gt;
  &lt;/template&gt;
  ...
  
  </code></pre>
  
  <p>Now, it works decently. The issue is, unfortunately, that in development mode I get a warning about mismatched nodes - apparently Vue doesn't like using svg elements. I have a feeling it messes a bit with some things in development during re-rendering. Is there any way around this?</p>
  
  <hr>
  
  <h1>Edit</h1>
  
  <p>After dabbling for a bit it seems the issue might be with something different - on a line of how <code>canvas</code> property is being updated. As I couldn't replicate it in CodePen (I guess  version of vue might have a different logging level?), here is a working example: <a href="https://github.com/msdsk/so_svg_example" rel="nofollow noreferrer">https://github.com/msdsk/so_svg_example</a></p>