Hover color change dynamically in Vue.js 3

App.vue

<script setup>
const themeColor = '#FFA500'

const style = {
  color: themeColor
}

const buttonStyle = {
  '--button-hover-color': themeColor
}
</script>

<template>
  <section class="mx-auto container">
    <h2 class="text-2xl" :style="style">Hover Example</h2>

    <button class="mt-10 bg-blue-500 text-white font-bold py-2 px-4 rounded" :style="buttonStyle">
      Hover Button
    </button>
  </section>
</template>

<style scoped>
button:hover{
  background-color: var(--button-hover-color);
  border-color: var(--button-hover-color);
  color:white;
  cursor:pointer
}
</style>