Call methods inside pageInit is not working

I’m trying to call function inside pageInit but it is not working.

<template>
<div class="page" data-name="Slide show">  
    <div class="navbar app-bg-color">
        <div class="navbar-inner sliding">
            <div class="title text-center">slide show</div>
        </div>
    </div>
  
    <div class="page-content">

        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="swiper-zoom-container">
                        <img id="img1" src="../images/img1.jpg">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="swiper-zoom-container">
                        <img id="img2" src="../images/img2.jpg">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="swiper-zoom-container">
                        <img id="img3" src="../images/img3.jpg">
                    </div>
                </div>
            </div>
        </div>

  </div>


   <div class ="toolbar toolbar-bottom-md no-bg-color no-shadow" >
        <div class="toolbar-inner padding-right padding-left">
            <!--Contrast-->
            <div class="img-circle text-align-center app-bg-color image-grading-icon" >
                <a class="sheet-open text-white" data-sheet="#contrast-sheet">
                    <i class="f7-icons">circle_half</i>
                </a>
            </div>
            <!--Brightness-->
            <div class="img-circle text-align-center app-bg-color image-grading-icon" >
                <a class="sheet-open text-white" data-sheet="#brightness-sheet">
                    <i class="f7-icons">eye</i>
                </a>
            </div>
            <!--Delete-->
            <div class="img-circle text-align-center app-bg-color image-grading-icon" >
                <a id="delete_btn"> <i class="f7-icons">trash</i> </a>
            </div>
        </div>
    </div>
    
   <!--Adjust contrast Modal-->
   <div id="contrast-sheet" class="sheet-modal" style="height:12em;">
        <div class="toolbar app-bg-color">
            <div class="toolbar-inner">
                <div class="text-center">Adjust contrast</div>
                <div class="right"><a class="link sheet-close text-white" href="#">Done</a></div>
            </div>
        </div>
        <div class="sheet-modal-inner">
            <div class="block" style="margin-top:45px">
                <div class="range-slider range-slider-init color-orange" data-label="true">
                    <input type="range" min="-100" max="100" step="1" value="0" id="contrast_range" @change="imageUpdate">
                </div>
            </div>
        </div>
    </div>

    <!--Adjust Brightness Modal-->
    <div id="brightness-sheet" class="sheet-modal" style="height:12em;">
        <div class="toolbar app-bg-color">
            <div class="toolbar-inner">
                <div class="text-center">Adjust brightness</div>
                <div class="right"><a class="link sheet-close text-white" href="#" >Done</a></div>
            </div>
        </div>
        <div class="sheet-modal-inner">
            <div class="block" style="margin-top:45px">
                <div class="range-slider range-slider-init color-orange" data-label="true">
                    <input type="range" min="-100" max="100" step="1" value="0" id="brightness_range" @change="imageUpdate">
                </div>
            </div>
        </div>
    </div>

</div>
</template>
<script>
  return {
    on: {
      pageInit: function (page) {
        
        var slides = new Swiper('.swiper-container', {
        });

        slides.on('slideChange', function(e) {
            // e is not working here and output is displaying as undefined;
            console.log("slideChange", e);
        });
        
        // I Want to call this method here, but i'm getting console error.
        imageUpdate();
      }
    },
    methods: {
     imageUpdate: function(e) {
         console.log(e)
        var contrast = $$("#contrast_range").val();
        var brightness = $$("#brightness_range").val();
        var activeEle = $$(".swiper-slide-active").find("img");
        var imageId =  activeEle.attr('id');
        Caman("#" + imageId, function () {
            this.revert(false);
            this.brightness(brightness);
            this.contrast(contrast);
            this.render();
        });

      }
    },
    
  };
  
</script>

Is this correct way of creating a slides instance and “slideChange” event inside pageInit ?

Please suggest me correct way to call the functions and creating instance.

What exact error do you have in console?

Try also:

pageInit: function (page) {
        
        var slides = this.$app.swiper.create('.swiper-container', {
        });
...