鼠标 hover（悬停）改变 background-color

<div id="demo">
   <div @mouseenter="mouseEnter" 
        @mouseleave="mouseLeave" 
        :style="active">
   			Hover over me!
   </div>
</div>

var demo = new Vue({
    el: '#demo',
    data: {
        active: ''
    },
    methods: {
        mouseEnter: function(){
            this.active = 'background-color: #cccccc';
        },
        mouseLeave: function () {
            this.active = '';
        },
    }
});

多个颜色 移入变色 变不一样的颜色

<div v-for="(item, index) in list" :key="index">
    <div
      class="dlItem"
      @mouseenter="handleMouseEnter(item)"
      @mouseleave="handleMouseLeave(item)"
      :style="{            
      backgroundColor: item.mouseFlag?hoverBgColor:dlColorList[item.name],
      }"
    >
     	{{item.name}} {{item.age}}
    </div>
</div>

  data() {
    return {
	    list: [
        {
          name: "a",
          age: 14,
        },
        {
          name: "b",
          age: 12,
        },
        {
          name: "c",
          age: 15,
        },
      ],
     dlColorList: {
        a: "yellow",
        b: "pink",
        c: "red",
      },
      hoverColorList: {
        a: "gray",
        b: "aqua",
        c: "brown",
      },
      hoverBgColor: "",
    }
}

// 移入
    handleMouseEnter(item) {
      // item.mouseFlag = true;
      this.$set(item,'mouseFlag',true);
      this.hoverBgColor = this.hoverColorList[item.name];
    },
    // 移出
    handleMouseLeave(item) {
      // item.mouseFlag = false;
      this.$set(item,'mouseFlag',false);
      this.hoverBgColor = '';
    },

如何在 vue.js 中实现鼠标 hover（悬停）改变 background-color