Анимация множества кнопок

[fori]

Здраствуйте, скажите пожалуйста какой путь правильно выбрать для анимирования нескольких кнопок одной и тойже анимацыей. Проблема в том что кнопки могут быть нажаты несколько раз и каждый раз они должны анимироватся независимо друг от друга. Во vue.js
Раньше я использовал костыль в виде присвоения класа :class="{myAnim: hasAnim}"
переменной hasAnim
и сбрасователя анимации

vue.hasAnim = false;
window.requestAnimationFrame(() => window.requestAnimationFrame(() => {
vue.hasAnim =true;
}))

Но при таком методе прийдется предопредилить переменных в количество кнопок, и копировать window.requestAnimationFrame, существует ли способ по удобнее и по правельнее...
Код

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="vue">
  <button @click="anim">first</button>
  <button @click="anim">second</button>
  <button @click="anim">third</button>
  <button @click="anim">fouth</button>
  <button @click="anim">fifth</button>
</div>
<style>
#vue{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}
.WrongAnim {
  animation: swing 0.5s linear; }
@keyframes swing {
  10% {
    transform: translateX(15%); }
  20% {
    transform: translateX(-13.5%); }
  30% {
    transform: translateX(12%); }
  40% {
    transform: translateX(-10.5%); }
  50% {
    transform: translateX(9%); }
  60% {
    transform: translateX(-7.5%); }
  70% {
    transform: translateX(6%); }
  80% {
    transform: translateX(-4.5%); }
  90% {
    transform: translateX(3%); }
  100% {
    transform: translateX(0); } }
</style>
<script>
	
	
var vue = new Vue({
    el: '#vue',
    data: {
    },
    methods: {
        anim() {
            //something here
        }
    },
})
</script>

[рони]

fori,

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="vue">
    <button @click="anim">first</button>
    <button @click="anim">second</button>
    <button @click="anim">third</button>
    <button @click="anim">fouth</button>
    <button @click="anim">fifth</button>
</div>
<style>
#vue{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.WrongAnim {
    animation: swing 0.5s linear; }
@keyframes swing {
    10% {
        transform: translateX(15%); }
    20% {
        transform: translateX(-13.5%); }
    30% {
        transform: translateX(12%); }
    40% {
        transform: translateX(-10.5%); }
    50% {
        transform: translateX(9%); }
    60% {
        transform: translateX(-7.5%); }
    70% {
        transform: translateX(6%); }
    80% {
        transform: translateX(-4.5%); }
    90% {
        transform: translateX(3%); }
    100% {
        transform: translateX(0); } }
</style>
<script>


var vue = new Vue({
        el: '#vue',
        data: {
        },
        methods: {
                anim({target}) {
                     target.classList.remove('WrongAnim');
                     document.documentElement.clientHeight;
                     target.classList.add('WrongAnim');
                }
        },
})
</script>