Highlighting on hover works while dragging a HTML element over a gantt row

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-ganttastic",
-  "version": "0.9.30",
+  "version": "0.9.31",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-ganttastic",
-  "version": "0.9.31",
+  "version": "0.9.32",
   "description": "A simple and customizable Gantt chart component for Vue.js",
   "repository": {
     "type": "git",

src/GGanttRow.vue

@@ -18,6 +18,7 @@
       ref="barContainer"
       :style="barsContainerStyle"
       @dragover="onDragover($event)"
+      @dragleave="onDragleave($event)"
       @drop="onDrop($event)"
       @mouseover="onMouseover()"
       @mouseleave="onMouseleave()"
@@ -105,8 +106,16 @@ export default {
 
     onDragover(e) {
       e.preventDefault()   // enables dropping content on row
+      if(this.highlightOnHover){
+        this.$refs["g-gantt-row"].style.backgroundColor = this.getThemeColors().hoverHighlight
+      }
     },
 
+    onDragleave() {
+      this.$refs["g-gantt-row"].style.backgroundColor = null
+    },
+
+
     onDrop(e){
       let barContainer = this.$refs.barContainer.getBoundingClientRect()
       let xPos = e.clientX - barContainer.left