laravelとvueでaxiosを使ってデータベースから値を受取り表示したい

Question

前提・実現したいこと

laravelとVueで自作のアプリケーションを作成しています

axiosでgetしてきた値を表示させる際に以下のエラーメッセージが発生しました。

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

axiosを用いて、DBのデータを取得するところまではできています
consoleにて確認しました

vueで扱うために、データをcompetitionsに格納してそれぞれのカラム（今回はmember）を表示したいのですが、表示されません。
（ちなみにHELLOは表示されるのでcomponentファイルへのルーティング等は問題ないと認識しています）

ReferenceError: competitions is not defined

該当のソースコード

<template>
<div>
       <li v-for="competition in competitions" :key="competition.id">{{ competition.member }}</li>
　　　　HELLO
</div>
</template>

<script>
    export default {
    data () {
        return {
            competitions: [],
        }
  },
    created (){
      this.competitions = [];
      axios.get('/api/competition/competitonteams')
                    .then(response => {
                    // console.log(response.data);
                    this.competitions = response.data.member;
                    console.log(response.data.member);
                    console.log('loglogs');
                    console.log(competitions);
                })
                .catch(
                    response => console.log(response)
                );
            }
    }

</script>

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

import test from './components/testComponent.vue';
/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

// Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('test-component', require('./components/testComponent.vue'));

const app = new Vue({
    el: '#app',

});

補足情報（FW/ツールのバージョンなど）

laravel5.6 vue

よろしくお願いします

console.log(response.data)の中身
![

console.log(this)

Comments

[meshi_s]

コンソールのエラーは「console.log(competitions);」にthisが足りてないからだと思われます。

axiosのデータがどのように取れているのでしょうか。

[naga777]

consoleについては、console.log(this);では表示されましたが、console.log(this.competitions);はundefinedとなりました

axiosのデータについては画像を追加しました

Answer 1

※検討違いだったらすみません。

response.dataだけ渡すでは駄目でしょうか？

// response.data.memberがundefinedになる？
this.competitions = response.data.member;
↓
this.competitions = response.data;

Comments

[naga777]

ありがとうございます
this.competitions = response.data;
に変更することで、console.log(response.data)とconsole.log(this.competitions);が一致しました

一方で、memberのみv-forで回したいのですがそちらは何も表示されないままです