What is the best way to check these widgets and is this architecture quite convenient?

Question

Vue.js

A list of checkboxes comes from the server, which we render with a checked status, and then, depending on the selected checkboxes, widgets should be displayed. When the save button is pressed, we send the status of the checkboxes to the server and disable the display of widgets on the client.
I divided the widgets into:
Container - in which widgets are stored
Widget element - having a header and containing widget content Widget
content - widget content The structure of checkboxes coming from the server

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
                }
            }
]

The structure of the list of checkboxes stored in the 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'
                    }
                ]

Widget container template

<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 widget template

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

figas how difficult it is
vue to refuse
the easiest way is to load the entire html code with data and, depending on the value of the corresponding checkbox, change the CSS display of each div on page load, and when editing the list, all widgets will be available immediately without additional call to the server