In a Vue.js application, I have fetched a product based on provided route id.

Product object in an array has pictures. I want to create a copy of reactive data "mosaicImagesList" that is reflected once the product is fetched, and it should have following structure:

[
    {
        "url": "https://via.placeholder.com/650x250",
        "isWide": true,
        "isTall": false
    },
    {
        "url": "https://via.placeholder.com/350x150",
        "isWide": true,
        "isTall": false
    }
]

It shows an output in console.log, but it shows an empty list of array in the rendered page.

Here is my code:

export default {
  name: 'products.show',

  data () {
    return {
      slide: 0
    }
  },

  computed: {
    product () {
      return this.$store.state.product
    },

    images () {
      const items = this.product.picture || []
      const result = []
      items.forEach(image => {
        const img = new Image()
        img.addEventListener('load', function () {
          const isWide = img.width > img.height
          const isTall = img.height > img.width
          result.push({ url: image, isWide, isTall })
        })
        img.src = image
      })
      console.log(result) // <--- THIS WORKS IN THE CONSOLE LOG DEV TOOL
      return result
    }
  },

  methods: {
    async fetchProduct () {
      await this.$store.dispatch('products/getById', this.$route.params.id)
    }
  },

  async created () {
    await this.fetchProduct()
  }
}

Here is the HTML section:

          <div class="image-mosaic">
            <div
              v-for="(image, index) in images"
              :key="index"
              :style="`background-image: url('${image.url}')`"
              class="card" />
          </div>