How to add a class only to the element that is hovered over with the mouse?

Question

Vue.js

Hello. How to implement a functionality where there are identical blocks with the same classes, but when hovering over the button, the class should be added only to the block where the button was hovered over? The code itself:

<div class="col-md-3 services-item" :class="{'hoverClass': active_services}">
          <img src="img/laptop.png" alt="">
          <h3 class="my_services_title">Тест</h3>
          <button class="btn-price" @mouseenter="active_service()" @mouseleave="deactive_service()">Нажать</button>
        </div>
        <div class="col-md-3 services-item" :class="{'hoverClass': active_services}">
          <img src="img/laptop.png" alt="">
          <h3 class="my_services_title">Тест</h3>
          <button class="btn-price" @mouseenter="active_service()" @mouseleave="deactive_service()">Нажать</button>          
        </div>

var body = new Vue({
  el:'#main',
  data:{
    active_services: false
  },
  methods:{
    active_service: function(){
      this.active_services = true;
    },
    deactive_service:function(){
      this.active_services = false;
    }
  }

});

Answer 1

<div
  v-for="item in items"
  class="col-md-3 services-item"
  :class="{ hoverClass: item.hover }"
>
  <img :src="item.scr" alt="">
  <h3 class="my_services_title">Тест</h3>
  <button
    class="btn-price"
    @mouseenter="item.hover = true"
    @mouseleave="item.hover = false"
  >Нажать</button>
</div>

data: {
  items: [
    {
      src: 'img/laptop.png',
      hover: false,
    },
    {
      src: 'img/laptop.png',
      hover: false,
    },
  ],
},

UPD. Of course, I blunted - as Sergei delphinpro suggests in the comments , separate hover properties are not needed, it is enough to store the index of the active element.