influence/components/home/dashboard/layout01/layout01.vue

<template>
  <div class="dash--board--contents type1">
    <!-- CORE -->
    <div>
      <Core12x14
        :config="coreConfig"
        :interval-time="props.intervalTime"
      />
    </div>
    <!-- USER -->
    <div> 
      <User12x10
        :config="userConfig"
        :interval-time="props.intervalTime"
      />
    </div>
    <!-- RAN -->
    <div> 
      <Ran12x24
        :config="raneConfig"
        :interval-time="props.intervalTime"
      />
    </div>
  </div>
</template>

<script setup>
  import { useI18n } from 'vue-i18n';
  import Core12x14 from '@/components/home/dashboard/layout01/core/layout01Core.vue'
  import User12x10 from '@/components/home/dashboard/layout01/user/layout01User.vue'
  import Ran12x24 from '@/components/home/dashboard/layout01/ran/layout01Ran.vue'
  
  /***********************
  *     plugins inject
  ************************/
  const {$toast, $log, $dayjs, $eventBus } = useNuxtApp()
  const i18n = useI18n()

  // props
  const props = defineProps({
    intervalTime: {
      type: Number,
      default: 5000
    }
  })
  
  /***********************
  *     data & created
  ************************/
  const widgets = computed(() => useAuthStore().getWidgets);
  const coreConfig = computed(() => widgets.value?.find(w => w.widgetGrp == 'CORE'));
  const userConfig = computed(() => widgets.value?.find(w => w.widgetGrp == 'USER'));
  const raneConfig = computed(() => widgets.value?.find(w => w.widgetGrp == 'RANE'));

  /***********************
  *     Methods
  ************************/

</script>