Alpine JS меняет изображения с интервалом с помощью функции window.setInterval()

Я пытаюсь решить тривиальную задачу с помощью Alpine JS и стандартной функции JS setInterval. Итак, я пытаюсь создать селектор изображений, в котором изображения будут меняться каждую секунду (1000 мс).

Вот что я получил:

<div x-data = "imgFunc()">
        <h1 class = "text-xl py-3">Chosing the picture</h1>

        <div class = "w-1/2">
            <img x-show = "img === 'img1'" src = "{{ asset('images/training/img1.jpg') }}" alt = "Main Image">
            <img x-show = "img === 'img2'" src = "{{ asset('images/training/img2.jpg') }}" alt = "Main Image">
            <img x-show = "img === 'img3'" src = "{{ asset('images/training/img3.jpg') }}" alt = "Main Image">
        </div>

        <div>
            <ul class = "flex">
                <li class = "w-1/6 p-3" :class = "{ 'border' : img==='img1' }"><img src = " {{ asset('images/training/img1.jpg') }} " alt = "image1" @click = "startImg"></li>
                <li class = "w-1/6 p-3" :class = "{ 'border' : img==='img2' }"><img src = " {{ asset('images/training/img2.jpg') }} " alt = "image2" @click = "img='img2'"></li>
                <li class = "w-1/6 p-3" :class = "{ 'border' : img==='img3' }"><img src = " {{ asset('images/training/img3.jpg') }} " alt = "image3" @click = "img='img3'"></li>
            </ul>
        </div>



    </div>



<script>
    function imgFunc(){
            var i = 1;
            var img ='img'+i;
            return {
            i,
            img,
            startImg(){
                var myvar = window.setInterval(function(){
                    this.img = 'img'+this.i;
                    if (this.i<3){
                        this.i++;
                    }else{
                        this.i=1;
                    }    
                }, 1000);
            },
            changeImg() {
                this.img = 'img'+this.i;
                if (this.i<3){
                    this.i++;
                }else{
                    this.i=1;
                }                       
            }

        }
        
    }

</script>

При нажатии на изображение № 1 в списке изображения должны начать меняться, но этого никогда не происходит. Почему?

Я также попытался передать имя функции changeImg() в событии @click, и это сработало отлично, при нажатии на одно изображение менялось одно за другим.

Я также попытался передать имя функции changeImg() в setInerval() следующим образом:

startImg(){
     var myvar = window.setInterval(this.changeImg, 1000);
},

Или вот так:

startImg(){
     var myvar = window.setInterval(changeImg, 1000);
},

Я пытался изменить "это" на "я"

<script>
    function imgFunc(){
            var i = 1;
            var img ='img'+i;
            var self=this;
            return {
            i,
            img,
            startImg(){
                var myvar = window.setInterval(function(){
                    self.img = 'img'+self.i;
                    if (self.i<3){
                        self.i++;
                    }else{
                        self.i=1;
                    }    
                }, 1000);
            },
            changeImg() {
                this.img = 'img'+this.i;
                if (this.i<3){
                    this.i++;
                }else{
                    this.i=1;
                }                       
            }

        }
        
    }

</script>

Но на самом деле ничего не работает.