Problem Explained

I am having trouble with using Axios or fetch in nuxt. Everything works well locally but once I have deployed it to vercel it just doesn't fetch API data again. GraphQL works alright but Axios doesn't work.

I am trying to fetch blog posts from my strapi backend deployed on Heroku! I tried the fetch hook, asyncData (It just doesn't work locally nor on the server), async mounted also doesn't work.

My Code

With asyncData:

export default {
    props: {
        slug: {
            type: String,
            required: true,
        },
    },
    async asyncData({ $axios, $props }) {
        let tag = {}
        let tags = []
        await $axios
            .get(
                `http://bloggish-strapi-backend.herokuapp.com/tags?slug=${$props.slug}`
            )
            .then((res) => {
                tags = res.data
                tag = tags[0] ? tags[0] : null
            })
        return {
            tags,
            tag
        }
    },
}

Doesn't work either ways

With mounted hook

export default {
  data() {
        return {
            tags: [],
            tag: {},
        }
    },
    async mounted() {
        await this.$axios
            .get(
                `http://bloggish-strapi-backend.herokuapp.com/tags?slug=${this.$props.slug}`
            )
            .then((res) => {
                this.tags = res.data
                this.tag = this.tags[0] ? this.tags[0] : null
            })
    },
}

Doesn't work on vercel

It's deployed as an SSR project to vercel using the vercel builder

vercel.json

{
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {}
    }
  ]
}