【Vuex】APIで取得したデータを表示できない

いつも大変お世話になっております。
久しぶりのVueを利用したシステムを開発しており手こずっております。

APIで取得したデータをstoreのmutations経由でstateに格納したのですが、
html側で取得したデータを表示することができません。

厳密にはhtml側にオブジェクト型のデータは渡っているのですが、
多次元構造のオブジェクトになっており、深い階層のデータを表示することができません。

例えば下部に掲載しているApp.vueのソースコードに

pickedDataLiving : this.$store.getters.selectPickedItems.living

とあるのですが、

pickedDataLiving : this.$store.getters.selectPickedItems

だと表示は可能ですが、.livingが付いていると表示ができなくなります。

前回も同じようなことで質問をさせていただいたのですが、
いまいち、なぜそのようなことになってしまうのかというのが理解ができず
再度質問をさせていただく運びとなってしまいました。

お詳しい方がいらっしゃればご教授いただけますと幸いです
それではどうぞ宜しくお願い致します。

ソース

javascript
1// store/index.js
2
3import { createStore } from 'vuex'
4import axios from 'axios'
5
6export default createStore({
7	
8	state : {
9		
10		// actionsのfetchPlanで取得したデータを以下に格納し、html側に表示させたい
11		selectPickedItems : {
12			"living" : []
13		}
14		
15	},
16	
17	getters : {
18		selectPickedItems : (state) => state.selectPickedItems
19	},
20	
21	mutations : {
22		
23		setPlan : (state, { plan }) => {
24			
25			// selected === true のもののみ、state.selectPickedItems に格納
26			state.selectPickedItems.living = plan.acf.living.filter(i => i.selected === true)
27			
28		}
29		
30	},
31	
32	actions : {
33		
34		async fetchPlan({ commit }, { id }){
35			
36			const url = `https://localhost:8890/wp-json/wp/v2/plan/${id}/`;
37			const planRowData = await axios.get(url)
38			const plan = planRowData.data
39			
40			if( !plan.id ) throw new Error('Invalid Post.')
41			
42			commit('setPlan', { plan })
43			
44		}
45		
46	}
47	
48})
49


// App.vue

<template>
  <div>

    ※ Vuex側の state.selectPickedItems.living のデータを表示させたい

    <p>pickedDataLiving</p>

    {{ pickedDataLiving }}

  </div>
</template>

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

export default {

  name : 'Plan',

  data(){
    return {

      pickedDataLiving : this.$store.getters.selectPickedItems.living

    }
  },

  created(){

    this.fetchPlan({ id : 846 });

  },

  watch : {

    // 今回のteratailの質問では利用しません

    // pickedDataLiving : function(){
    //   this.$store.commit('setSelectPickedItems', {
    //     selectType        : "living",
    //     selectPickedItems : this.pickedDataLiving
    //   })
    // }

  },

  methods : {

    ...mapActions([ 'fetchPlan' ])

  }

}
</script>

<style lang="scss" scoped>
h1{

  font-weight   : bold;
  font-size     : 2rem;

  margin-bottom : 30px;

}

h2{

  margin-bottom : 20px;

}

.ppp{

  display         : flex;
  align-items     : flex-start;
  justify-content : space-between;

}

.bbb{

  label{

    text-align    : center;
    border        : 3px solid #000;
    padding       : 15px;
    display       : block;
    width         : 320px;
    margin-bottom : 12px;

  }


  input{

    display : none;


    &:hover + label{

      color      : #fff;
      border     : 3px solid #000;
      background : #000;

    }


    &:checked + label{

      color      : #fff;
      border     : 3px solid #000;
      background : #000;

    }

  }

}
</style>