SOURCE

 var app = new Vue({
        el:"#mask",
        data:{
            imgArr:[
                "https://www.sportsdestinations.com/files/sports_destination_management/nodes/2015/8968/IMG.jpg",
                "https://gutta.lv/wp-content/uploads/2015/10/test-img.jpg",
                "https://image.shutterstock.com/image-vector/creative-modern-img-letter-logo-260nw-1780496255.jpg",
                "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7zgMVj25mYRtp0opXnwSc4XdIBKSvCgZojQ&usqp=CAU",
            ],
            index:[0],
        },
        methods:{
            prev:function(){
                this.index--;
            },
            
            next:function(){
                this.index++;
            }
        }
    })

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">

</script>
<div id="mask">
    <div class="center">
        <img :src="imgArr[index]">
        <a href="javascript:void(0)" class="left" v-on:click="prev" v-show="index!=0"><</a>
        <a href="javascript:void(0)" class="right" v-on:click="next" v-show="index <imgArr.length-1">></a>
    </div>
</div>

.left{
    float: left;
    
}
.right{
    float: left;
    
}