TypeError: Cannot read property 'url' of undefined at VueComponent.choosedThumb

[Haritha Rathinakumar]

I'm getting this error as soon as I hover over an image in the scroller after I click on either left or right arrow.

<template>
  <div class="product-images-carousel">
     <ProductZoomer
        :base-images="getProductImages"
        :base-zoomer-options="zoomerOptions"
      />
 </div>
</template>

getProductImages method simply gets images from a prop passed on to ProductZoomer parent component and returns it in a format required for ProductZoomer

getProductImages() {
      return {
        'thumbs': this.productImages,
        'normal_size': this.productImages,
        'large_size': this.productImages
      }
    },

zoomerOptions: {
        zoomFactor: 3, // scale for zoomer
        pane: 'pane', // three type of pane ['pane', 'container-round', 'container']
        hoverDelay: 400, // how long after the zoomer take effect
        namespace: 'zoomer', // add a namespace for zoomer component, useful when on page have mutiple zoomer
        move_by_click:false, // move image by click thumb image or by mouseover
        scroll_items: this.productImages && this.productImages.length, // thumbs for scroll
        choosed_thumb_border_color: "#bbdefb", // choosed thumb border color
        scroller_button_style: "line",
        scroller_position: "bottom",
        zoomer_pane_position: "right"
      }