vue实现悬停一段时间改变style

<div id="demo">
            <div @mouseover="mouseOver" @mouseleave="mouseLeave" :style="active">悬停两秒后改变颜色</div>
</div>

 

<script>
            var demo=new Vue({
                el:'#demo',
                data:{
                    active:''
                },
                methods:{
                    mouseOver:function(){
                        timer=setTimeout(()=>{
                            this.active='background-color:#aaaaff';
                        },2000);
                    },
                    mouseLeave:function()
                    {
                        clearTimeout(timer);
                        this.active='';
                    }
                }
            });
        </script>