vue鼠标动态切换多个背景图

vue @mouseover @mouseout事件bug@

求助！！在鼠标移走后出发了@mouseout事件，但是却不能更新原来的背景图片。鼠标移入图片切换了，但是移走了之后切换不回来
项目是一个动态菜单，数据什么的都绑定好了，之前用的是csshover控制样式及切换图片。现在后台需要动态赋值图片。我用了:style="{backgroundImage:‘url(’+navbackimg[index]+’)’, backgroundSize:‘contain’}"方法，但是不知道后续的hover切换和点击事件如何代替之前的功能

// An highlighted block
<ul class="winde_nav" style="width: 420px;">
    <li  v-for="(item,index) in navimgs" :key='index' :class="[classA==index?'tabactive':'',
    'navbackimg[index]']" :style="{backgroundImage:'url('+navbackimg[index]+')', backgroundSize:'contain'}" @click="selected(index)"
    @mouseover="navOn(index)" @mouseout="navLeave(index)"
    >
        <router-link :to='item.path'  tag="p" style="height: 100%;width: 100%;"></router-link>
        <ul class="shimingnav clearfix">
            <li v-for="(itemchild,itemindex) in item.children" :key="itemindex"
                :class="classB == itemchild ? 'ulactive' : '' "  @click="menuselected(itemchild);navfunc(itemchild.func)">
                     <router-link class="menu_ul_text" tag="p" :to="itemchild.path" >{{itemchild.name}}</router-link>
            </li>
        </ul>
    </li>
</ul>

getMyMenu(){
    let the=this;
    the.$http({
        method: 'get',
        url: '/user/users/webmenus/tree',
    }).then(function (response) {
       console.log('mymenu',response)
        let indexTree=response.data.webmenus_x;
        the.navimgs=indexTree;
        let classrArr=[]
        let classrArr2=[]
        let classrArr3=[]
        indexTree.forEach(item=>{
            classrArr.push('../../../static/images/windex/'+item.icon+'.png')
            classrArr2.push('../../../static/images/windex/'+item.icon+'2.png')
            classrArr3.push('../../../static/images/windex/'+item.icon+'.png')
        })
        the.navbackimg=classrArr
        the.navbackimg2=classrArr2
        the.navbackimg3=classrArr3
        console.log('the.navimgs活数据菜单tupian',the.navbackimg)
        // console.log('indexTree.icon活数据菜单',indexTree[0].icon)
    }).catch(function (error) {
        the.$message.error(error.message);
    });
},

navOn(index){
    let the=this
    the.navbackimg[index]=the.navbackimg2[index]
},
navLeave(index){
    let the=this
    the.navbackimg[index]=the.navbackimg[index]//这段代码the.navbackimg[index]无法被重新赋值还原背景图
},