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
            }
        );
    }

Checkbox е персонализиран компонент с квадратче за отметка в плъзгащ се стил, неговият 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 е асинхронен и може да се зарежда по всяко време, но обикновено не се променя, след като приложението се зареди. Той се попълва от родителя, така че детето просто трябва да изчака да има данни и всеки път, когато се промени, отмята всичко по подразбиране.

Благодаря ти