Alpine.jsのx-forで配列を表示させると、後ろの配列から表示される

実現したいこと

https://reffect.co.jp/vue/javascript-vue-js-create-calendar
↑のサイトを参考にカレンダーを表示させる画面を作っており、
下記calendar.jsで作成した配列をcalendar.blade.phpで先頭から順に表示させたいです。

発生している問題・分からないこと

week配列が後ろから表示されてしまいます。

該当のソースコード

calendar.blade.php

1<div x-data="calendars"> 2 <template x-for="week in calendars"> 3 <template x-for="dates in week.week"> 4 <div x-text="dates.date"></div> 5 </template> 6 </template> 7</div>

calendar.js

1import moment from 'moment'; 2 3//今月最初の日付を取得 4let date = moment().startOf("month"); 5//カレンダーに表示する最初の日付を取得 6let youbiNum = date.day(); 7const startDate= date.subtract(youbiNum, "days"); 8console.log(startDate); 9 10//今月最終日の日付を取得 11date = moment().endOf("month"); 12//カレンダーに表示する最終日を取得 13youbiNum = date.day(); 14const endDate = date.add(6-youbiNum, "days"); 15console.log(endDate); 16 17//カレンダーの縦の週の数を取得 18const weekNumber = Math.ceil(endDate.diff(startDate, "days") / 7); 19console.log(weekNumber) 20 21//カレンダー表示用の配列作成 22let calendars = []; 23for (let week = 0; week < weekNumber; week++) { 24 let weekRow = []; 25 for (let day = 0; day < 7; day++) { 26 weekRow.push({ 27 date: startDate.get("date"), 28 }); 29 startDate.add(1, "days"); 30 } 31 32 calendars.push({ 33 week: weekRow 34 }); 35} 36 37console.log(calendars); 38 39document.addEventListener('alpine:init', () => { 40 Alpine.data('calendars', () => ({ 41 calendars: calendars, 42 })) 43})

試したこと・調べたこと

上記の詳細・結果

Alpine.jsの公式サイトにkeyを指定する方法もあったため下記を試してみましたが結果は変わりませんでした。また、日付を表示させるdivタグでログを表示させるようにしたところ、実行順序は正しいようでした。```<div x-data="calendars">
<template x-for="(week, index) in calendars" :key="index">
<template x-for="(dates, index) in week.week" :key="index">
<div x-data="console.log(dates.date)" x-text="dates.date"></div>
</template>
</template>

```

補足

開発環境
・Laravel sail
・Alpine.js

どなたかわかる方がいらっしゃれば、ご教授くださると幸いです。