title: Vue Js: Invisible SVG
body: <p>I've tried to append a line to a svg element but even though the line exists in DOM, it's not visible.</p>
  
  <pre><code>    &lt;svg id="app"&gt;
        &lt;svg-line&gt;&lt;/svg-line&gt;
      &lt;/svg&gt;
      &lt;template id="svg-lineTemp"&gt;
        &lt;line x1="0" y1="0" x2="100" y2="100"&gt;&lt;/line&gt;
      &lt;/template&gt;
      &lt;script&gt;
      Vue.component('svg-line', {
        template: '#svg-lineTemp'
      });
      vm = new Vue({
        el: '#app'
      });
    &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/omidh/4xmha7om/1/" rel="nofollow">https://jsfiddle.net/omidh/4xmha7om/1/</a></p>