Как отобразить один компонент, но в разных местах сайта и с разным наполнением

Поставлена задача: есть компонент с чекбоксами (с любым контентом), необходимо вывести его на странице сайта в нескольких местах, с разным наполнением.

Компонент:

  <template>
  <div class="check-boxes">
    <h2>{{ CHECKBOXITEMS.checkTitle }}</h2>
    <ul>
      <li v-for="(checkItem, index) in CHECKBOXITEMS.checkBoxes" :key="index">
        <label>
          <input
            type="checkbox"
            v-bind:value="checkItem.name"
            v-model="CHECKBOXITEMS.checkResult"
            v-bind:style="CHECKBOXITEMS.styleBox"
          />
          {{ checkItem.name }}
        </label>
      </li>
    </ul>
    <h3>Список:</h3>
    <span
      class="selected"
      v-for="(selected, index) in CHECKBOXITEMS.checkResult"
      :key="index"
    >
      {{ selected }}
    </span>
  </div>
</template>

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

export default {
name: "VcheckBox",

computed: {
...mapGetters(["CHECKBOXITEMS", "CHECKBOXITEMS2", "CHECKBOXITEMS3"])
}
};
</script>

Store:

export default {
      state: {
        CheckBoxItems: {
          checkBoxes: [
            { name: "Андрей" },
            { name: "Сергей" },
            { name: "Ромка" },
            { name: "Саня" }
          ],
          checkTitle: "Кто будет тусить",
          checkResult: [],
          styleBox: {
            height: "13px",
            width: "13px"
          }
        },
        CheckBoxItems2: {
          checkBoxes: [
            { name: "Миша" },
            { name: "Вася" },
            { name: "Катя" },
            { name: "Сеня" }
          ],
          checkTitle: "Кто будет петь?",
          checkResult: []
        },
        CheckBoxItems3: {
          checkBoxes: [
            { name: "Илья" },
            { name: "Ася" },
            { name: "Митяй" },
            { name: "Луиджи" }
          ],
          checkTitle: "Кто будет загорать?",
          checkResult: []
        }
      },
      mutations: {},
      actions: {},
      getters: {
        CHECKBOXITEMS(state) {
          return state.CheckBoxItems;
        },
        CHECKBOXITEMS2(state) {
          return state.CheckBoxItems2;
        },
        CHECKBOXITEMS3(state) {
          return state.CheckBoxItems3;
        }
      }
    };

Пример, как надо:

<div>
    <VcheckBox />

    <h3>Заголовок</h3>

    <VcheckBox />

    <p>Lorem ipsum dolor sit amet</p>

    <VcheckBox />
</div>

Все 3 чекбокса с разным наполнением из стора, записывать геттеры в скрипт примера нельзя, только в компоненте. Пробовал передавать "кодовое слово"

<VcheckBox v-bind:checkboxTitle="CHECKBOXITEMS" />

а в компоненте принимал через пропс и вставлять checkboxTitle вместо CHECKBOXITEMS, но естественно выдает ошибку без геттеров.


Ответы (1 шт):

Автор решения: Serg Kos

Спасибо большое за наводку Kirill Babinec, помогло явное указание данных

<VcheckBox v-bind:checkboxTitle="$store.getters.CHECKBOXITEMS" /> 
→ Ссылка