Axios request goes into infinite loop on VueJs

Question

I have created an axios function that fetches images and displays them on a webpage. The problem is, when the axios makes the request, it goes into an infinite loop of requests and never stops. The number in the blue bubble just keeps increasing rapidly.

I am not sure what the problem. Any help will be appreciated.

this a Slide component that renders photos in a slider

          <Slide
            v-for="(post, index) in getAllInstaPosts"
            :key="index"
            :class="`slide slide-${index}`"
            :aria-hidden="index === 0 ? false : true"
          >

it get it's information from this method in computed property - I tried using async keyword in here, but the compiler kept complaining - unexpected async

getAllInstaPosts () {
      return (this.item.pdp && this.item.pdp === true) ? this.getInstaPostsForProduct() : this.allInstaPosts
    }

this function in methods property that creates the request.

 getInstaPostsForProduct () { // <- makes a call to foursixty api to fetch insta posts of a certain product
          axios.get(`https://foursixty.com/api/v2/${foursixty.sitename}/timeline/?for_url=https://www.${foursixty.domainName}/${this.$router.currentRoute.path}`)
            .then(response => {
              if (response.status === 200) {
                this.postsForUrl = response.data.results
                console.log('DATA:' + response.data)
              }
            })
            .catch((err) => {
              Logger.error(err);
            })
          return this.postsForUrl;
        }

Answer 1

1. Computed property functions must be synchronous. You cannot return the response from an async function
2. Computed properties should be as close to pure functions as possible. Creating side-effects like altering data properties leads to infinite loops since computed properties are recomputed every time any of their dependencies change.

The solution is to store state in your data properties and update it at the appropriate time such as when your current route changes

export default {
  data: () => ({
    allInstaPosts: [], // ¯\_(ツ)_/¯
    postsForUrl: [],
    item: {
      pdp: true // ¯\_(ツ)_/¯
    }
  }),
  computed: {
    getAllInstaPosts () {
      return this.item.pdp ? this.postsForUrl : this.allInstaPosts;
    }
  },
  methods: {
    async getInstaPostsForProduct () {
      this.postsForUrl = []; // empty the array
      try {
        const { data: { results } } = await axios.get(
          `https://foursixty.com/api/v2/${foursixty.sitename}/timeline/`,
          {
            params: {
              for_url: `https://www.${foursixty.domainName}/${this.$route.path}`
            }
          }
        );
        this.postsForUrl = results;
      } catch (err) {
        Logger.error(err);
      }
    }
  },
  watch: {
    $route: { // watch for route changes and trigger the request
      immediate: true,
      handler: "getInstaPostsForProduct"
    }
  }
};