How to properly request images in Vue.js?

Question

Vue.js

Hi all. Can you tell me what is wrong with me? There is a contentful.com service, on which I make a "content model" for a blog. It has title, text, date and image. Image lies in a completely different request and is called only after the id is defined in the first request. But the problem is that when I get the articles, they line up in the correct sequence, ie. first article number 1, then article number 2 and at the end article number 3, but the pictures, depending on the request, arrive in a different order, i.e. The picture does not match the article.
This is how I make a request for all this and the conclusion, maybe someone came across?

<template>
  <div class="hello">
    <ul>
      <li v-for="(post, index) in posts">
        <img :src="images[index]" alt="">
        <div>
          <h3>{{ post.fields.title }}</h3>
          <p>{{ post.fields.text }}</p>
          <h4>{{ post.fields.date }}</h4>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'hello',
  data() {
    return {
      posts: [],
      images: [],
    };
  },
  methods: {
    fetchData() {
      axios.get('https://cdn.contentful.com/spaces/5638qkywlebj/entries?access_token=4b0a64fd67c5c05a56514c5f546494913079cd1691d996ccc30228cd8c3a8d78').then((response) => {
        this.posts = response.data.items;
        this.posts.forEach((post) => {
          const imageId = post.fields.image.sys.id;
          /* eslint-disable */
          axios.get(`https://cdn.contentful.com/spaces/5638qkywlebj/assets/${imageId}?access_token=4b0a64fd67c5c05a56514c5f546494913079cd1691d996ccc30228cd8c3a8d78`).then((response) => {
          /* eslint-enable */
            this.images.push(response.data.fields.file.url);
          }).catch((error) => {
            console.log(error);
          });
        });
        console.log(this.images);
      }).catch((error) => {
        console.log(error);
      });
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

Answer 1

const imageId = post.fields.image.sys.id

Something not a single post has an image.
Well, otherwise you can use the index, replace .forEach((post)with .forEach((post, i), and
this.images.push(response.data.fields.file.url);
replace with

this.$set(this.images, i, response.data.fields.file.url);

Or, there is an option to refuse to use an additional array, and store the path to the image directly in the post object. Instead of :src="images[index]"will :src="post.image", but
this.images.push(response.data.fields.file.url);
will change to

this.$set(post, 'image', response.data.fields.file.url);

Answer 2

What prevents you from throwing pictures at the post index and that's it?