【Vuex】gettersで取得したデータをコンポーネント側のdataに追加したい

いつも大変お世話になっております。

Storeで管理しているデータをgettersで取得し、
コンポーネント側のdataに追加したいと思っています。

現在以下のようにソースを書いているのですが全く表示がされません。

dataは https://jsonplaceholder.typicode.com から取得したデータになるのですが、
あらかじめstoreのdataに手動で値を入れておけば問題なく表示ができるのですが、
apiを利用したデータは表示することができません。

どなたかどうすれば良いかわかる方がいらっしゃればご教授いただけますと幸いです。

※またstackoverflowでも同様の質問をしています。
どちらかで解決ができればその旨を追記致します。

ソースコード

javascript
1
2// store/index.js
3
4import { createStore } from 'vuex'
5import axios from 'axios'
6
7export default createStore({
8	
9	state : {
10		
11		isLoading : true,
12		data      : ""
13		
14	},
15	
16	getters : {
17		
18		isLoading : (state) => state.isLoading,
19		data      : (state) => state.data
20		
21	},
22	
23	mutations : {
24		
25		setData(state, { data }){
26			
27			state.data = data
28			
29		}
30		
31	},
32	
33	actions : {
34		
35		async fetchData({ commit, state }){
36			
37			const url = `https://jsonplaceholder.typicode.com/users/1`;
38			const rowData = await axios.get(url)
39			const data = rowData.data
40			
41			state.isLoading = false
42			
43			commit('setData', { data })
44			
45		}
46	}
47	
48})
49
50


// App.vue

<template>
  <div>

    <template v-if="isLoading">
      <p>Loading...</p>
    </template>

    <template v-else>
      {{ data }}
    </template>


  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {

  data(){
    return {

      data : this.$store.getters.data

    }
  },

  created(){

    this.fetchData();

  },

  computed : {

    ...mapGetters([ 'isLoading' ])

  },

  methods : {

    ...mapActions([ 'fetchData' ])

  }

}
</script>