trying to get an objects key which is a 'letters + counter number' variable but it won't work

I know tis might be a silly problem but I'm not sure how to frame this line of code to do what I need. I'm using Vue CLI and I have a some objects within an array in my data. one of those objects have several image links with key that goes -> img1 : ./link, img2: ./link2. In my function i need to change the target elements source to the next image i.e from img1 to img2 where I have a counter that stores the number that i want img to change to. however the results only show NaN.

here is my some HTML:

<img @click="storyboard" v-else :src="slide.img1" />
    <div class="counter hide">
       <p>{{ counter }} / 5</p>
    </div>

here is some JS

data() {
         return {
            slides: [
               { title: 'Landing Page', img1: require("../assets/wadah/proposal.mp4"), info: "Wadah Archive is an alternative museum where everyday artefacts are given meaning through crowdsourced nostalgia. The online archive stresses on the idea that the stories and conversations about the artefact by people visiting the archive should be a part of the artefact itself. It is a reflection on traditional methods of preserving and displaying objects through proposing an alternative navigation system by translating physical artefacts into a digital space.", makeSmall: false
               }, {
                  title: "Interacting with 3D objects", img1: require("../assets/wadah/pinStill.jpg"), info: "dummydata", makeSmall: false
               }, {
                  title: "Designing Pins and Signage", img1: require("../assets/wadah/pins.png"), info: "dummydata", makeSmall: true
               },{
                  title: "Home and Index Navigation", img1: require("../assets/wadah/home1.jpg"), img2: require("../assets/wadah/home3.jpg"), img3: require("../assets/wadah/home2.jpg"), img4: require("../assets/wadah/index.jpg"), img5: require("../assets/wadah/index2.jpg"), info: "dummydata", makeSmall: false
               },{
                  title: "User Flow", img1: require("../assets/wadah/wireflow.png"), info: "dummydata", makeSmall: false
               },
            ],
            visibleSlide: 0,
            counter: 1
         }
      }

  methods: {

storyboard(event) {
            if (this.visibleSlide === 3) {
               let ele = event.target
               this.counter++
               ele.src = this.slides[3].img + this.counter
               // console.log(this.slides[3].img + 2)
               // console.log(ele.src, this.counter)
            }
         }
}