Why the function that inside the v-hover is called every times whenever hovering

Whenever hovering on the v-sheet, getBlueColor() function that is inside the v-hover is called. why it happened like that?

exemple code

<template>
  <v-row justify="center" align="center">
    <v-hover v-slot="{ hover }">
      <v-sheet width="100" height="100" style="border: white" :style="hover ? 'background-color: white' : ''">
        <span :style="getRedColor()"> why </span>
      </v-sheet>
    </v-hover>
  </v-row>
</template>

<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  methods: {
    test() {
      console.log('test')
    },
    getBlueColor() {
      console.log('Call function')
      return 'color:blue;'
    },
  },
})
</script>

And It is result after 5times hovering on the v-sheet

(10) Call function func.getBlueColor

Answer

On top of what was told above, I do recommend the second part of my answer here to have a fully flexible styling (section How I do personally handle this kind of flow)

<button
  class="flex items-center w-auto p-4 text-center ..."
  :class="[
    callToAction.types[color][variant],
    { 'opacity-50 cursor-not-allowed shadow-none': disabled },
  ]"
>
  Nice flexible button
</button>

With a whole CSS object mapped to the received props.
It works even better if you have an utility-first CSS framework, like Tailwind.