vue.jsでデータが出てこない

Question

前提・実現したいこと

Railsアプリにvue.jsを取り入れ、メモ機能を作成しています。
Axios を使ったAPIの呼び出しをしたいのですが何も表示されません。
初期値はseedに入れ、jsonデータで確認できています。

該当のソースコード

app.vue

<template>
  <div id="app">
      <ul>
      <li v-for="memo in memos" :key="memo.id">
        {{ memo.title }}： {{ memo.body }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data: function () {
    return {
      memos: "memos"
    }
  },
  mounted () {
    this.setMemo();
  },
  methods: {
    setMemo: function () {
      axios.get('/api/memos')
      .then(response => (
      this.memos = response.data
    ))
  }
 }
}
</script>


</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

controller

class Api::MemosController < ApplicationController
  def index
    @memos = Memo.order('created_at DESC')
  end
end

view

 <%=javascript_pack_tag 'hello_vue'%>

docker.file

FROM ruby:2.6.3

RUN apt-get update -qq && \
  apt-get install -y build-essential \
  libpq-dev \
  nodejs
RUN mkdir /app_name
ENV APP_ROOT /app_name
ENV LANG C.UTF-8
WORKDIR $APP_ROOT
ADD ./Gemfile $APP_ROOT/Gemfile
ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock
RUN bundle install
ADD . $APP_ROOT

補足情報

画面上にHello Vue!は表示されていますが、devtoolのdataには、message:"Hello Vue!"しか出ていません。

Comments

[ex_vi_termini]

response => (
this.memos = response.data
)
ではなく、
response => {
this.memos = response.data
}
の場合はどうですか？また、memosの中身は確認されましたか？

[shin342]

結果は変わりませんでした。
memosの中身は確認できています。
vue.jsを取り込んだ際に
docker-compose run web bin/webpackのコマンドがうまくいかず、ここに問題がありそうです。
上記のコマンドを打つと、error Command "webpack" not found.のエラーがでてしまいます。

[nasuk47]

APIの通信はうまくいっているのでしょうか？
console.log(response)でresponseの中身を追記してもらってもよろしいでしょうか？