How to realize the animation effect of moving the comment list up and down in vue?

The effect that

wants to achieve is that, for example, after clicking on the move up of the second comment, the second comment will move to the position of the first comment, and the first comment will also move to the position of the second comment.
this demo was written in jquery before. Recently, after learning the animation of vue, I want to use vue to realize it. But it is found that all the animations in vue seem to show hidden animations. For example, click to comment or fade in and out, and so on.
thought about manipulating class, but I set the different top value of each li in this demo between lines like this, so I can"t figure out how to change it dynamically.

:style="{top:index*35+"px",backgroundColor:bgArr[index]}"

I want to know how to use vue to realize the movement of clicks and comments after moving up.
the code I wrote in jquery nearby is for reference:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
/**/
*{margin: 0;padding: 0;}
body{background-color: -sharpfff;font-size: 13px;color: -sharp333;font-family: "";}
a{text-decoration: none;color: -sharp909090;}
ul{list-style: none;}
ul{
    width: 200px;
    height: 175px;
    margin:0 auto;
    border: 3px solid -sharp000;
    position: relative;
}
ul li{
    margin-bottom: 10px;
    border:1px solid -sharpccc;
    position: absolute;
}
ul li span{
    margin-right: 60px;
}
</style>
</head>
<body>
    <ul>
        <li class="1">
            <span></span>
            <input type="button" value="">
            <input type="button" value="">
        </li>
        <li class="2">
            <span></span>
            <input type="button" value="">
            <input type="button" value="">
        </li>
        <li class="3">
            <span></span>
            <input type="button" value="">
            <input type="button" value="">
        </li>
        <li class="4">
            <span></span>
            <input type="button" value="">
            <input type="button" value="">
        </li>
        <li class="5">
            <span></span>
            <input type="button" value="">
            <input type="button" value="">
        </li>
    </ul>
</body>
<script>
var bgArr = ["skyblue","tomato","YellowGreen","PaleGreen","Darkorange"];
// li
pos();
function pos(){
    $.each($("li"), function (index, value){
        $(value).css({
            top: index * 35,
            backgroundColor: bgArr[index % bgArr.length]
        })
    })
}
var key = true;
// (+)
$("li>input[value=""]").click(function (){
    if(key){
        key = false;

        var $this = $(this);//this
        var $curLi = $this.parent();//
        var $firstLi = $this.parents("ul").children().first();//
        var $lastLi = $this.parents("ul").children().last();//
        var $prevLi = $this.parent().prev();//
        var $nextLi = $this.parent().next();//
        var $otherLis = $this.parent().siblings();

        if($prevLi.length != 0){// 
            // 
            $curLi.animate({
                top: $prevLi.position().top
            },function (){
                //
                $prevLi.before($curLi);
                key = true;
            })
            // 
            $prevLi.animate({
                top: $curLi.position().top
            })
        }else{// 
            // 
            $curLi.animate({
                top: $lastLi.position().top
            },500,function (){
                // 
                $("ul").append($this.parent());
                key = true;
            });
            // 
            $.each($otherLis,function (index,value){
                $(value).animate({top:index*35},500);
            });
        }
    }
})
$("li>input[value=""]").click(function (){
    if(key){
        key = false;

        var $this = $(this);//this
        var $curLi = $this.parent();//
        var $firstLi = $this.parents("ul").children().first();//
        var $lastLi = $this.parents("ul").children().last();//
        var $prevLi = $this.parent().prev();//
        var $nextLi = $this.parent().next();//
        var $otherLis = $this.parent().siblings();

        if($nextLi.length != 0){
            $curLi.animate({
                top: $nextLi.position().top
            },function (){
                key = true;
                $nextLi.after($curLi);
            })
            $nextLi.animate({
                top: $curLi.position().top
            })
        }else{
            // 
            $curLi.animate({
                top: $firstLi.position().top
            },500,function (){
                // 
                $("ul").prepend($curLi);
                key = true;
            });
            // 
            $.each($otherLis,function (index,value){
                $(value).animate({top:(index+1)*35},500);
            });
        }
    }
})
</script> 
</html>

here is the code that I rewrote halfway to the above jquery code with vue


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
/**/
*{margin: 0;padding: 0;}
body{background-color: -sharpfff;font-size: 13px;color: -sharp333;font-family: "";}
a{text-decoration: none;color: -sharp909090;}
ul{list-style: none;}
ul{
    width: 200px;
    height: 175px;
    margin:0 auto;
    border: 3px solid -sharp000;
    position: relative;
}
ul li{
    margin-bottom: 10px;
    border:1px solid -sharpccc;
    position: absolute;
}
ul li span{margin-right: 60px;}

</style>
</head>
<body>
    <div id="app">
    <transition-group tag="ul">
        <li 
        v-for="(item,index) in textArr" 
        :key="item.id"
        :style="{top:index*35+"px",backgroundColor:bgArr[index]}"
        >
            <span>{{item.msg}}</span>
            <input type="button" value="" @click="toUp(index)">
            <input type="button" value="">
        </li>

    </transition-group>
    </div>
</body>
<script>
var vm = new Vue({
    el:"-sharpapp",
    data:{
        textArr:[
            {id:1,msg:""},
            {id:2,msg:""},
            {id:3,msg:""},
            {id:4,msg:""},
            {id:5,msg:""}
        ],
        bgArr:["skyblue","tomato","YellowGreen","PaleGreen","Darkorange"]
    },
    methods:{
        
    }
});

</script> 
</html>

Vue.js

Mar.11,2022