Компонент Vue 3 Composition API не работает, реактивируйте класс

У меня есть кнопка, и я просто хочу, чтобы она анимировалась при нажатии - сделайте так, чтобы она была нажата. Это работает, если я делаю необязательный компонент, как показано ниже:

<template>
          <button class = "button" :class = "{'shadow__click': classButton}" @click = "buttonClass">
            Tell me already!
          </button>
</template>
    
<script>

export default {
  data(){
    return {
     classButton : false
    }
  },
  methods: {
    buttonClass(){
      this.classButton = true;
      setTimeout(() => {
        this.classButton = false
      }, 1000)
    }
  }
}
</script>

<style lang = "less">
.button{
    cursor: pointer;
    padding: 12px 24px;
    position: relative;
    border-radius: 5px;
    background-color: #38b2ac;
    border: none;
    color: #fff8e1;
}

.shadow__click{
  animation: click 1s
    }

@keyframes click {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 5px;
    left: 1px;
  }
  50% {
    top: 10px;
    left: 3px;
  }
  75% {
    top: 5px;
    left: 1px;
  }
  100% {
    top: 0;
    left: 0;
  }
}
</style>

но он не хочет работать, когда я делаю композицию, и я не вижу проблемы, но она просто не работает (( я использую функцию console.infoed, и она переходит к функции, изменяет значение переменной, но класс не применяется Это ошибка Vue 3?

<script>
 import { ref } from "vue"

       setup(){
      
         let classButton = ref(false);
         function buttonClass(){
           classButton = true;
           setTimeout(() => {
             classButton = false
           }, 1000)
         }
      
         return { classButton, buttonClass}
           }
    </script>