Fixed calendar grid not loading during refresh

components/calendar/state/monthly/Layout.vue

@@ -2,7 +2,8 @@
 import { useCalendar } from '@/stores/CalendarStore'
 import { useThrottleFn } from '@vueuse/core'
 
-const { currentDate, decrementMonth, incrementMonth, currentMonthData } = useCalendar()
+const { currentDate, decrementMonth, incrementMonth } = useCalendar()
+const { currentMonthData } = storeToRefs(useCalendar())
 
 function handleWheel(e: WheelEvent) {
   const isMovingUp = e.deltaY < 0
@@ -24,14 +25,16 @@ const moveCalendarRight = useThrottleFn(() => {
 
 <template>
   <div class="grid grid-cols-10" @wheel="handleWheel">
-    <CalendarStateMonthlyDayTile
+    <template v-if="currentMonthData">
-      v-for="day in currentMonthData?.days"
+      <CalendarStateMonthlyDayTile
-      :key="`layout-month-grid-${day}`"
+        v-for="day in currentMonthData?.days"
-      :date="{
+        :key="`layout-month-grid-${day}`"
-        day: day,
+        :date="{
-        month: currentDate.currentMonth,
+          day: day,
-        year: currentDate.currentYear
+          month: currentDate.currentMonth,
-      }"
+          year: currentDate.currentYear
-    />
+        }"
+      />
+    </template>
   </div>
 </template>