Vue.jsのmouseover, mouseleaveの挙動に不明な点があります

Question

いつもお世話になっております。

以下のコードのmouseoverとmousuleaveの動きがイマイチ理解できません。
（サンプル → https://jsfiddle.net/rogvu9fw/）

期待している動きとしては、
①mouseoverした時にcolorHolderにitem.colorを格納してから、item.colorにredを代入して背景が赤くなる。
②そしてmouseleaveした時に①で格納した元の色をitem.colorに代入して、背景が元の色に戻る。
という、.box :hover {background-color: red}と同じ動きになる事を期待していたのですが、背景が戻ったり戻らなかったりとよく分からない挙動になってしまいました。

どうコードを修正すれば期待した動きになるでしょうか？

皆様よろしければお力添えをお願いいたします。

<div id="app">
  <div class="box"
  v-for="item in items"
  v-bind:key="item.name"
  v-bind:style="{ backgroundColor: item.color }"
  v-on:mouseover="changeColor(item)"
  v-on:mouseleave="returnColor(item)">
    <h1>{{ item.name }}</h1>
  </div>
</div>

.box {
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

new Vue({
　el: '#app',
  data() {
    return {
      items: [
        {name: 'item1', color: 'blue'},
        {name: 'item2', color: 'lightblue'},
        {name: 'item3', color: 'green'},
        {name: 'item4', color: 'lightgreen'}
      ], 
      colorHolder: ''
    }
  },
  methods: {
    changeColor: function(item) {
      this.colorHolder = item.color
      item.color = 'red'
    },
    returnColor: function(item) {
      item.color = this.colorHolder
    }
  }
})

Answer 1

   changeColor: function(item) {
      if(item.color !== 'red'){
         this.colorHolder = item.color
         item.color = 'red'
      }
    },

mouseoveは複数回呼ばれます。
そのためchangeColorの処理は赤に変わっていない時のみ実行するようにする必要があります。

他の解決方法としてmouseoverをmouseenterに変えるなど考えられます。

Comments

[take-t.t.]

返信が遅くなってしまい申し訳ありません。
mouseイベントに関して色々と誤解していました。
教えていただいたコードで無事望み通りの挙動になりました。

ご回答ありがとうございました。