前提・実現したいこと

Vue.js初心者です。不足事項などがありましたら追記いたしますのでお申し付けください。
よろしくお願いいたします。
文章が下手なので、先にソースを見ていただけた方がわかりやすいかもしれません。。。

Vueのコンポーネントで、親から呼ばれた子のコンポーネント内で設定値をvuexへ保存したいのですが
その際に、親からのvuexの情報を受け取り、その情報を元に保存する先を変更したいと考えました。
やりたい構造が下記の通りです。

親のコンポーネントで今回呼び出したい共通部品のコンポーネントを呼び出します。
呼び出す際に、porpsなどでvuexの保存先（どのモジュールに保存するか）情報を子コンポーネントへ渡します。
もらった情報を...mapGetterや...mapActionsの第一引数に入れてあげて保存先を選択する

子のコンポーネン内(Chidlコンポーネント)では、ボタン(Buttonコンポーネント)などが実装されており、その状態結果を親からもらった保存先情報を元にvuexのモジュール先を選択して保存します。

該当のソースコード

親コンポーネント

vue
1<template>
2  <div>
3    <Child :storeName="'storeA'" :id="'AA'" :text="'ストア1'" />
4    <Child :storeName="'storeB'" :id="'BB'" :text="'ストア2'" />
5    <Child :storeName="'storeC'" :id="'CC'" :text="'ストア3'" />
6  </div>
7</template>
8<script>
9export default {
10  ...vueの諸々の処理 省略
11}
12</script>

子のコンポーネント Child.vue

vue
1<template>
2  <div class="c-btnAndText">
3    <Button v-model="btnState" />
4    <span v-text="text"></span>
5  </div>
6</template>
7<script>
8import { mapGetters, mapMutations, mapActions } from "vuex"
9import Button from '@/components/button.vue'
10
11export default {
12  name: 'Child',
13  data: () => {
14    return {
15      state: false,
16    }
17  },
18  components: {
19    Button,
20  },
21  props: {
22    storeName: String,
23    title: String,
24    id: String,
25  },
26  computed: {
27    // 下記がthis.storeNameではなく、直接 storeA と書くとうまく行くがpropsの値だとうまくいかない
28    ...mapGetters(this.storeName, [
29      'getItem', // storeA~Cの中にそれぞれある共通getter
30    ]),
31    btnState: {
32      get() {
33        return this.state
34       },
35       set(value) {
36         this.state = value
37       }
38    },
39  },
40  watch: {
41     state: {
42       handler: function(nv, ov) {
43         this.setItem(this.id, this.state)
44       },
45       deep: true,
46     }
47  },
48  methods: {
49    ...mapActions(this.storeName, [
50      'setItem',
51    ]),
52  },
53}    
54</script>

storeの構造

js
1import Vue from 'vue'
2import Vuex from 'vuex'
3import storeA from './storeA'
4import storeB from './storeB'
5import storeC from './storeC'
6
7Vue.use(Vuex)
8export default new Vuex.Store({
9  state: {},
10  mutations: {
11  },
12  actions: {
13  },
14  modules: {
15    storeA: storeA,
16    storeB: storeB,
17    storeC: storeC,
18  },
19})

importした先のstoreA~Cの構造

storeディレクトリ
|- index.js
|- storeA
--|- index.js
--|- actions.js
--|- getters.js
--|- mutations.js
... storeB ~ Cも同様

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

色々試して、propsで値を渡し、受け取った値を...mapGettersの設定値に使用したくてもundefinedのエラーがでてうまくいきません。
発生箇所は下記コードの、this.storeNameの部分がうまくいきません。
変数ではなく、'storeA'のように直接書くとうまくいきます。

#　やってみたこと
上記のソースのような感じで、
...mapGettersや、...mapActionsの第一引数でpropsの値を入れてみたのですがうまく動きませんでした。
今回のような、ボタンと文章という使いまわせるコンポーネントがあり、その設定情報を指定したstoreに保存したいのですが
うまくいかず、色々調べてcomputedなどで値を指定するなど試行錯誤してみたのですが、結果が出なく質問させていただきました。

聞きたいこと

そもそもこのように...mapGettersや...mapActionsのストアのmoduleを選択する引数へ、変数を設定し、保存先を分けてあげることができるのか -> できない場合は、全部のパターンのコンポーネントをそれぞれ作る必要があるのでしょうか？
現状のコードの方向性はあっているのか、間違っているのか。（第一引数へ変数をいれて振り分ける)
可能である場合、どう言った方法があるのか

になります。

不足事項や間違いなどありましたら、修正追記いたしますので教えていただけると幸いです。
何卒よろしくお願いいたします。