Cannot access object-data in a nested object

You cannot directly assign a data property which is not declared. Instead you can set perPage to swiperOption in created hook

just add a created hook

data() {
    return {
        perPage:2,
        swiperOption: {
            slidesPerView: 0,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        },
    } 
}, 

created() {
    this.swiperOption.slidesPerView = this.perPage;
}

I don't think you can access an object's property while declaring it, but since data is a function you can just assign perPage to a variable:

data(){
    var perPage = 2;

    return {
      perPage:perPage,
      swiperOption: {
        slidesPerView: perPage,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
    }
}

Is perPage a constant or it will change depending on something? If it's a constant, there is no need to declare it inside data().

But if it changes, one way to do that is setting a watcher on it and update swiperOption with the new value everytime it changes. Something like:

watch(){
   perPage(newVal){
      this.swiperOption.slidesPerView = newVal;
   }
}