VueJs и Vuex, как прикрепить v-модель к динамическим полям

У меня есть ряд флажков, созданных базой данных. Вызов базы данных обычно не завершается до загрузки страницы.

Это часть моего Vue.

folderList - это список папок из базы данных, каждая из которых имеет ключ и doc.label для описания флажка и doc.hash для использования в качестве уникального ключа.

<template>
    <ul>
        <li v-if="foldersList!=null" v-for="folder in folderData">
            <Checkbox :id="folder.key" :name="folder.hash" label-position="right" v-model="searchTypeList[folder.hash]">{{ folder.doc.label }}</Checkbox>
        </li>
    </ul>
</template>
export default {
    name: 'Menu',
    components: {
        Checkbox,
        RouteButton
    },
    props: {
        foldersList: {type: Array, required: true}
    },
    computed: {
        ...mapGetters({
            searchListType: 'getSearchListType'
        }),
        searchTypeList: {
            get() {
                return this.searchTypeList;
            },
            set(newValue) {
                console.log(newValue);
                //Vuex store commit
                this.$store.commit(Am.SET_SEARCH_TYPES, newValue);
            }
        }
    },
    methods: {
            checkAllTypes: _.debounce(function (folderList){
            const initialList = {};
            folderList.forEach((folder) => {
                initialList[folder.hash] = true;
            });
            this.$store.commit(Am.SET_SEARCH_TYPES, initialList);
        }, 100)
    },
    mounted() {
        //hacky way of prefilling data after it loads
        this.$store.watch(
            (state) => {
                return this.foldersList;
            },
            this.checkAllTypes,
            {
                deep: false
            }
        );
    }

Флажок - это настраиваемый компонент со скользящим флажком стиля, его v-модель похожа на эту

<template>
    <div class="checkbox">
        <label :for="id" v-if="labelPosition==='left'">
            <slot></slot>
        </label>
        <label class="switch">
            <input type="checkbox" :name="name" :id="id" :disabled="isDisabled" v-bind:checked="checked" v-on:change="$emit('change',  $event.target.checked)"/>
            <span class="slider round"></span>
        </label>
        <label :for="name" v-if="labelPosition==='right'">
            <slot></slot>
        </label>
    </div>
</template>

<script>
    export default {
        name: 'Checkbox',
        model: {
            prop: 'checked',
            event: 'change'
        },
        props: {
            id: {default: null, type: String},
            name: {required: true, type: String},
            isDisabled: {default: false, type: Boolean},
            checked: Boolean,
            labelPosition: {default: 'left', type: String},
            value: {required: false}
        }
    };
</script>

Я проверил, что флажок работает с использованием простой нединамической v-модели и без цикла.

Я хочу собрать массив проверенных значений.

В моем примере выше я попытался с этим вычислить, чтобы попытаться связать с vuex, как и с другими полями, но get считается мутацией, потому что он добавляет свойства к объекту по мере его прохождения. Я не знаю как это решить

Vuex:

const state = {        
    searchListType: {}
};

const getters = {
    getSearchListType: function (state) {
        return state.searchListType;
    }
};

const mutations = {
    [Am.SET_SEARCH_TYPES]: (state, types) => {
        state.searchListType = types;
    }
};

Как правильно их связать? Мне нужны значения в vuex, чтобы несколько родственных компонентов могли использовать значения и сохранять их между изменениями страницы.

Кроме того, как правильно заполнить данные? Полагаю, у меня здесь серьезная структурная проблема. FolderList является асинхронным и может загружаться в любой момент, однако обычно он не изменяется после загрузки приложения. Он заполняется родителем, поэтому ребенку просто нужно подождать, пока у него появятся данные, и каждый раз, когда они меняются, по умолчанию отмечать все.

Спасибо