NuxtでRailsにAPI通信を使用とするとconnect ECONNREFUSED 127.0.0.1:3000 エラーが出てしまう

前提・実現したいこと

DockerとNuxt.jsとrails apiを使用してSSRのSPAアプリケーションを作成中です。
現在はcreate-nuxt-appしたばかりで、とりあえずapi通信をしてみようというところで以下のエラーが出てしまい、ハマってしまっています。

ここからapi通信ができるようになるところまでもっていきたいと考えています。
メッセージ文を検索しても記事から解決まで至りませんでした。。
ご教授よろしくお願い致します。

発生している問題・エラーメッセージ

connect ECONNREFUSED 127.0.0.1:3000

該当のソースコード

関係がありそうなところを記載しますが、足りないところがあればご教示ください。

js
1//nuxt.config.js
2
3export default {
4server: {
5    port: 8080,
6    host: '0.0.0.0',
7  },
8modules: [
9    '@nuxtjs/axios',
10  ],
11axios: {},
12}

vue
1
2//index.vue
3
4<template>
5  <v-app>
6    <TargetCards :targets="targets" />
7  </v-app>
8</template>
9
10<script>
11
12import TargetCards from '@/components/organisms/TargetCards.vue'
13import axios from 'axios'
14
15  export default {
16
17    components: {
18      TargetCards
19    },
20
21     asyncData() {
22      return axios.get('http://localhost:3000/api/hosts')
23      .then(response => {
24        return {
25          targets: response.data
26        }
27      })
28    }
29
30</script>

vue
1
2//TargetCards.vue
3
4<template>
5  <div>
6  <v-card  v-for="target in targets" :key="target.id">
7    <v-card-subtitle class="pb-0">
8      {{target.address}}
9    </v-card-subtitle>
10
11    <v-card-text class="text--primary">
12      <div>{{target.profile}}</div>
13    </v-card-text>
14  </v-card>
15  </div>
16</template>
17
18<script>
19
20export default {
21
22  props: {
23    targets: {
24      type: Array,
25      default: () => []
26    }
27  }
28}
29
30
31
32</script>

yaml
1
2#docker-compose.yaml
3
4version: '3'
5
6services:
7  web:
8    build: ./api
9    command: /bin/sh -c "rm -f /tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
10    ports:
11      - '3000:3000'
12    depends_on:
13      - db
14    volumes:
15      - ./api:/app
16      - bundle:/usr/local/bundle
17    tty: true
18    stdin_open: true
19  db:
20    image: mysql:5.7
21    volumes:
22      - mysql_data:/var/lib/mysql/
23    environment:
24      MYSQL_ROOT_PASSWORD: password
25    ports:
26      - '3305:3305'
27  front:
28    build: ./front
29    volumes:
30      - ./front:/app
31    ports:
32      - '8080:8080'
33    tty: true
34    stdin_open: true
35    command: npm run dev
36
37volumes:
38  mysql_data:
39  bundle:

Dockerfile
1FROM node:14.16.1-alpine
2
3ENV APP_HOME /app
4RUN mkdir -p $APP_HOME
5WORKDIR $APP_HOME
6# EXPOSE 3000
7# ENV HOST 0.0.0.0
8
9# コマンド実行
10RUN apk update && \
11  apk add git && \
12  npm install -g @vue/cli nuxt create-nuxt-app
13

Dockerfile
1FROM ruby:2.7.1
2
3RUN apt-get update -qq && \
4  apt-get install -y build-essential \ 
5  libpq-dev \        
6  nodejs \
7  && rm -rf /var/lib/apt/lists/* 
8
9RUN mkdir /app
10ENV APP_ROOT /app
11WORKDIR $APP_ROOT
12
13ADD ./Gemfile $APP_ROOT/Gemfile
14ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock
15
16RUN bundle install
17
18