Docker nuxt js and django getting error (Econnrefused) - node.js

Question

i am currently working on docker with django and nuxt js. I can get json data from https://jsonplaceholder.typicode.com/posts in asyncData or nuxtServerInit it's correctly fetching and getting no error. But when i want to fetch from my django rest api service is getting error (cors headers added). I tested to fetching posts from django rest api with created() hook and it's working. I don't understand why its getting error.
pages/index.vue
export default {
asyncData(context){
return context.app.$axios.$get('http://127.0.0.1:8000') // this is throwing an error
.then((res) => {
let posts = [];
posts = res;
return { posts: res }
})
},
created() {
this.$axios.$get('http://127.0.0.1:8000') // this is not throwing any error
.then(e => {console.log(e);})
}
}
my docker compse ile
version: '3'
networks:
main:
driver: bridge
services:
api:
container_name: blog_api
build:
context: ./backend
ports:
- "8000:8000"
command: >
sh -c "python manage.py runserver 0.0.0.0:8000"
volumes:
- ./backend:/app
networks:
- main
web:
container_name: blog_web
build:
context: ./frontend
ports:
- "8080:8080"
volumes:
- ./frontend:/code
networks:
- main
backend docker file
FROM python:3.8-alpine
ENV PYTHONBUFFERED 1
ENV PYTHONWRITEBYTECODE 1
RUN mkdir /app
WORKDIR /app
COPY ./requirements.txt /app/
RUN pip install -r requirements.txt
EXPOSE 8000
ADD . /app
frontend dockerfile
FROM node:13-alpine
WORKDIR /code/
COPY . .
EXPOSE 8080
ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=8080
RUN npm install
CMD ["npm", "run", "dev"]
Nuxt-config.js
server: {
port: 8080,
host: '0.0.0.0'
}