javascript - Big question for help!!!!!Why can this output be different?

Question

As shown in the picture, why are the output attributes different? ? ? ? ?

<template>
        <p class="table-p">
            <span @click='change_router'>点我跳转</span><br>
            <ul class="table">
                <li v-for='item in data'>                
                    <p 
                    :class="item.moveYse?'zindex':''"
                    class="content" 
                    @click='start0(item,$event)'
                    @mousedown='moveDown(item,$event)'
                    @mousemove='move0(item,$event)'
                    @mouseup='moveUp(item,$event)'
                    :style="'top:'+item.top+'px;left:'+item.left+'px'">
                        {{item.a}}
                    </p>
                </li>
            </ul>
        </p>
</template>
<script>
export default{
    data(){
        return{
            data: [
                {a:'列表1',top:0,left:0,startX:0,startY:0,moveYse:false},
                {a:'列表2',top:0,left:0,startX:0,startY:0,moveYse:false},
                {a:'列表3',top:0,left:0,startX:0,startY:0,moveYse:false},
                {a:'列表4',top:0,left:0,startX:0,startY:0,moveYse:false},
            ],
        }
    },
    created(){
        var that =this
        setInterval(function () {
          that.msg += 1
        }, 1000)
    },
    watch: {
        
    },
    methods: {        
        change_router() {
            this.$router.push({name:'index'})
        },
        start0(item,e) {
            item.moveYse = true
            // console.log(item,e,'click')
        },
        moveDown(item,e) {
            item.moveYse = true
            console.log(item,e,'down')
            item.startX = e.clientX
            item.startY = e.clientY
        },
        move0(item,e) {
            if (item.moveYse == true) {
                console.log(item,e,item.moveYse,'move')
                item.top = e.clientY - item.startY
                item.left = e.clientX - item.startX 
            }
        },
        moveUp(item,e) {
            item.moveYse = false
            let l = e.clientY - item.startY
            if (l < 50) {
                console.log(l)
                item.startY = 0
                item.startX = 0
                item.top = 0
                item.left = 0
            }else {

            }
            console.log(item.moveYse,item,item.moveYse,'up')
        }
    }
}    
</script>

Answer 1

 moveDown(item,e) {
    item.moveYse = true
    console.log(item,e,'down')
    item.startX = e.clientX
    item.startY = e.clientY
},

moveUp(item,e) {
    item.moveYse = false
    let l = e.clientY - item.startY
    if (l < 50) {
        console.log(l)
        item.startY = 0
        item.startX = 0
        item.top = 0
        item.left = 0
    }else {

    }
    console.log(item.moveYse,item,item.moveYse,'up')
}

When you print console.log(item.moveYse,item,item.moveYse,'up'), it is actually false, but when you click on the item object in the console, Since the moveDown method is executed, item.mouseYse is changed back to true.