Как лучше оформить проверку данных виджетов и вполне ли удобна данная архитектура?

Question

[Fierfoxik]

С сервера приходит список чекбоксов, который мы отрисовываем с checked статусом, и далее в зависимости от выбранных чекбосов должны отображаться виджеты . При нажатии кнопки сохранить мы отправляем на сервер статус чекбоксов и отключаем отображение виджетов на клиенте.

Я разделил виджеты на:
Контейнер - в котором хранятся виджеты
Виджет элемент - имеющий шапку и содержащий в себе виджет контент
Виджет контент - контент виджета

Как лучше бы и проще оформить проверку данных виджетов и вполне ли хороша данная архитектура?

Структура приходящих с сервера чекбоксов

var widgetSettings = [
            {   id: 'inlineCheckbox1',
                value:'option1',
                text: 'Статистика за период',
                type: {
                    name: 'widget-statistic',
                    StatusChecked: true
                }
            },{
                id: 'inlineCheckbox2',
                value:'option2',
                text: 'Агентское вознаграждение',
                type: {
                    name: 'widget-statistic',
                    StatusChecked: true
                }
            },{
                id: 'inlineCheckbox3',
                value:'option3',
                text: 'Экономия',
                type: {
                    name: 'widget-statistic',
                    StatusChecked: true
                }
            },{
                id: 'inlineCheckbox4',
                value:'option4',
                text: 'Заканчивается аннуляция без штрафа',
                type: {
                    name: 'widget-applications',
                    StatusChecked: true
                }
            },{
                id: 'inlineCheckbox5',
                value:'option5',
                text: 'Скоро заезд',
                type: {
                    name: 'widget-applications',
                    StatusChecked: false
                }
            },{
                id: 'inlineCheckbox6',
                value:'option6',
                text: 'Комментарии',
                type: {
                    name: 'widget-applications',
                    StatusChecked: false
                }
            }
]

Структура списка чекбоксов хранящаяся в store

widgetList: [
                    {
                        title: 'Статистика за период',
                        linkName: 'Перейти к отчету',
                        value:'option1',
                        type: 'widget-statistic',
                        widgetCalss: 'widget widget-statistics noData'
                    },{
                        title: 'Агентское вознагрождение',
                        linkName: 'Перейти к отчету',
                        type: 'widget-statistic',
                        widgetCalss: 'widget widget-statistics noData'
                    },{
                        title: 'Заканчивается аннуляция без штрафа',
                        linkName: 'Открыть все заявки',
                        type: 'widget-applications',
                        widgetCalss: 'widget widget-endannulment active'
                    },{
                        title: 'Скоро заезд',
                        linkName: 'Открыть все заявки',
                        type: 'widget-applications',
                        widgetCalss: 'widget widget-endannulment active'
                    }
                ]

Шаблон контейнера виджетов

<template>
		<div class="widgetsblock_list">
				<div class="widgetsblock_list_grid">
						<div class="widgetsblock_list_grid_col" v-for="(checkbox, index) in checkboxSettings">
								<WidgetItem  v-if="test( checkbox, widget)" v-for="widget in widgetList"  :key="index" :widget-data="{
												    name: 'Скоро заезд',
														linkName: 'Открыть все заявки'
								}"></WidgetItem>
						</div>
				</div>
		</div>

</template>

js шаблона виджетов

import WidgetStatistics from './WidgetStatistics.vue'
    import WidgetListApplications from './WidgetListApplications.vue'
    import WidgetItem from './WidgetsItem.vue'

    import { mapState } from 'vuex'

    export default {
				name: 'WidgetsCountainer',
				components: {
						WidgetStatistics,
            WidgetListApplications,
            WidgetItem
				},
        mounted: function () {

        },
        computed: {
            ...mapState ({ checkboxSettings: 'checkboxSettings', widgetList: 'widgetList'})
        },
        data() {
            return {
            }
        },
        methods:{
            test: function (checkbox,widgets) {
                if(checkbox.value===widgets.value){
                    if(checkbox.type.StatusChecked){
						return true
                    }
                }
            }
		}
    }

Answer 1

[ой всё]

фигасе как все сложно
vue отказать
проще всего загрузить весь html код с данными и в зависимости от значения соответствующего чекбокса менять CSS display каждого div на загрузке страницы, причем при редактировании списка все виджеты будут доступны сразу без дополнительного обращения к серверу