Soy nuevo en Vue.js y necesito crear un componente Vue para crear y manipular SVG. Según tengo entendido, no es mejor usar JQuery en un componente Vue. Sin embargo, me gustaría porque es muy sencillo seleccionar elementos.

Aquí está mi componente Vue, pero no estoy seguro de cómo hacerlo funcional. (Nota: el SVG vendrá de un servicio web, así que necesito agregarlo al DOM mediante programación).

<div id="app">
  <p>Hover mouse over the lights to turn them on.</p>
  <p>(How do I make this work??)</p>
  <div id="svg-div" v-html="svg" />
</div>

new Vue({
  el: '#app',
  data: {
    svg: `
      <svg width="50" height="120">
          <rect x="10" y="10" width="40" height="120" style="fill:black" />
          <circle cx="30" cy="30" r="15" fill="red" opacity=".3"/>
          <circle cx="30" cy="65" r="15" fill="yellow" opacity=".3"/>
          <circle cx="30" cy="100" r="15" fill="lightgreen" opacity=".3"/>
      </svg>`
  }
})

Aquí hay un ejemplo de trabajo (no Vue) usando JQuery.

var svg = `
<svg width="50" height="120">
  <rect x="10" y="10" width="40" height="120" style="fill:black" />
  <circle cx="30" cy="30" r="15" fill="red" opacity=".3"/>
  <circle cx="30" cy="65" r="15" fill="yellow" opacity=".3"/>
  <circle cx="30" cy="100" r="15" fill="green" opacity=".3"/>
</svg>
`;

$('#svg-div').html(svg);

$('circle').mouseenter(function() {
	$(this).attr('opacity', '1');
});

$('circle').mouseleave(function() {
	$(this).attr('opacity', '.3');
});
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hover mouse over the lights to turn them on.</p>
<div id="svg-div" />