src/pages/Dashboard.vue

@@ -5,25 +5,22 @@
     class="fit row justify-around items-start q-col-gutter-sm"
   >
     <div v-for="(item, index) in widgets" :key="index" class="col-4 full-height col-sm-6 col-xs-12">
-      <component :is="item" />
+      <component :is="item.widget" />
     </div>
   </q-page>
 </template>
 
 <script lang="ts">
-import { Component, defineComponent, onMounted, inject, markRaw } from 'vue';
+import { computed, defineComponent, inject } from 'vue';
 import { hasPermissions } from 'src/utils/permission';
 import { FG_Plugin } from 'src/plugins';
+
 export default defineComponent({
   name: 'Dashboard',
   setup() {
-    const widgets = markRaw<Array<Component>>([]);
     const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
-
-    onMounted(() => {
-      flaschengeist?.widgets.forEach((widget) => {
-        if (hasPermissions(widget.permissions)) widgets.push(widget.widget);
-      });
+    const widgets = computed(() => {
+      return flaschengeist?.widgets.filter((widget) => hasPermissions(widget.permissions));
     });
 
     return {