Adding a Vue.js v-on event to D3 SVG element

Question

Is it possible to add a VueJS v-on event to an SVG element in D3? I want to use the v-on.mouseover functionality to each rectangle element of an SVG. I am trying to do so by adding v-on:mouseover="active = !active" as an attribute in D3, as in the following snippet:

h.selectAll('.bar')
  .data(myCSVdata)
  .enter()
  .append('g')
  .attr('v-on:mouseover', 'active = !active')
  .attr('class', 'bars')
  .append('rect')

but D3 seems to strip out the v-on: and I am left with

<g mouseover="active = !active" class="bars">

Answer 1

The problem here is that the colon normally defines the namespace, and D3 will think that v-on is a namespace.

There is a solution: add another colon before it:

.attr(':v-on:mouseover', 'active = !active')

Here is a demo:

var div = d3.select("body")
  .append("div")
  .attr(':v-on:mouseover', 'active = !active');
  
console.log(div.node())

<script src="https://d3js.org/d3.v4.min.js"></script>