[Vue.js] axiosで取得したレスポンスをdataに反映する方法が知りたい

###概要
vue.js + Laravel API でWebシステムを作成中です。
Laravel側の実装でlocalhost:8000/api/CardList/001002にアクセスすると
JSON形式でデータを取得することができるようになりました。
vue.jsとAPIを連携させるためにaxiosを使用してデータの取得をしようとしていますが、vue.js側にデータの反映をする処理ができていない状態です。

ちなみにですが、consoleで this.Card の内容を確認したところ、
以下のようになっています。
お手数をおかけいたしますが、よろしくお願いいたします。

[ob: Observer]
length: 0
ob: Observer {value: Array(0), dep: Dep, vmCount: 0}
[[Prototype]]: Array

###確認したこと

vue
1   axios.get('/api/CardList/001002')
2        .then(response => console.log(response))

上記コードでconsoleを確認し、response.data に取得したいデータが
あることを確認しました。
Card[] に代入できていないことが分かりましたが、
dataに反映する書き方が分かっていない状態です。

###プログラム

vue
1<template>
2     <a class="test-btn-square" @click ="getData">ボタン</a>
3</template>
4
5<script>
6    export default {
7        data(){
8            return {
9                Card: [],
10            }
11        },
12        methods: {
13            getData() {
14                axios.get('/api/CardList/001002')
15                    //.then(response => console.log(response))
16                    .then(response => (this.Card = response.data) )
17                    .catch(error => console.log(error))
18            },
19        }
20    }
21</script>
22

yuki84web

2022/01/01 02:30 編集

"length: 0"ってなってるけど、（配列形式の）データ自体が取得出来ていないように見えますが

shimeji_XX

2022/01/05 23:41

返信が遅くなり申し訳ございません。回答ありがとうございます。繰り返しになりますが、 axios.get('/api/CardList/001002') .then(response => console.log(response)) で見た際には配列形式のデータが表示されています。 responseをvue.jsの配列Card[] に代入する処理がうまくいっていない状態です。こちらの処理の書き方についてが質問になります。