Resolved: @mouseover canot change a variable value

<template>
    <div @mouseover="hover = true"
         @mouseleave="hover = false"
        class="dot" style="width: 50px; height: 50px; background-color: darkgreen">
    </div>

</template>

<script>
export default {
  name: "InteractiveDotComponent",
  data(){
    return {
      hover: false//doesn't change on hover
    }
  }
}
</script>

<style scoped>

</style>

 @mouseover="this.hover = true"

<template>
    <div @mouseover="hover = true"
         @mouseleave="hover = false"
        class="dot" style="width: 50px; height: 50px; background-color: darkgreen">
    {{hover}}</div>
</template>