In Vue, style hover in . The color is in a variable

Question

I have the following

<li
            v-for="menuItem in menuItems"
            class="nav-menu__section"
            :key="menuItem.id"
            @click="sectionClick($event, menuItem.id)"
          >
            <b-icon class="nav-menu__section-icon" :icon="menuItem.icon"></b-icon>
            {{ menuItem.title }}
 </li>

I would like to give it the color that exists in a DB, the variable that collects that value is the following: hoverBackground = this.appUserData.buttonColor;

I tried creating a function to pick up that value and added it to the style attribute in the li, but it didn't work.

<li
        v-for="menuItem in menuItems"
        class="nav-menu__section"
        :key="menuItem.id"
        :style= changeHoverColor()
        @click="sectionClick($event, menuItem.id)"
      >
      <!--  :style = "styleobj" @mouseenter = "changeButColor"
        @mouseleave = "changeOriginalColor"
      > -->
        <b-icon class="nav-menu__section-icon" :icon="menuItem.icon"></b-icon>
        {{ menuItem.title }}
</li>

changeHoverColor {
  this.hoverBackground = this.appUserData.buttonColor;
}