Vue

HTML

<div id="app">
  <svg height="150" width="500">
    <ellipse class="el-one" cx="50" cy="40" rx="25" ry="25" @mouseover="changeFillColor" @mouseout="resetFillColor" />
        <ellipse class="el-two" cx="50" cy="70" rx="25" ry="25" @mouseover="changeFillColor" @mouseout="resetFillColor" />
            <ellipse class="el-three" cx="50" cy="100" rx="25" ry="25" @mouseover="changeFillColor" @mouseout="resetFillColor" />
    Sorry, your browser does not support inline SVG. 
  </svg>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

.el-one {
  fill: yellow;
}

.el-two {
  fill: green;
}

.el-three {
  fill: cyan;
}

Vue

new Vue({
  el: "#app",
  methods: {
  	changeFillColor(e) {
    	e.target.style.fill = "orange"
    },
    resetFillColor(e) {
    	e.target.style.fill = ""
    }
  }
})