Loop table dynamic header by month in Vue3.js

I want to show table date by month. How can I loop table data? Please show me.
enter image description here

I tried:

tableData: [
        {
          totalSale: 1,
          totalBorrow: 0,
          total: 1,
          details: [
            {
              date: moment("2024-08-01").format("DD/MM/YYYY"),
              totalSale: 1,
              totalBorrow: 0,
              total: 1,
            },
          ],
        },
        {
          totalSale: 2,
          totalBorrow: 1,
          total: 3,
          details: [
            {
              date: moment("2024-09-01").format("DD/MM/YYYY"),
              totalSale: 1,
              totalBorrow: 0,
              total: 1,
            },
          ],
        },
      ],

My result:

enter image description here