"Required property foo was not initialized" when using JS array as model with required properties in delegate

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    width: 800
    height: 800
    visible: true

    Repeater {
        // Doesn't work:
        model: [
            { displayName: "None", roundedScale: 0 },
            { displayName: "ExtraSmall", roundedScale: 1 },
            { displayName: "Small", roundedScale: 2 },
            { displayName: "Medium", roundedScale: 3 },
            { displayName: "Large", roundedScale: 4 },
            { displayName: "ExtraLarge", roundedScale: 5 },
            { displayName: "Full", roundedScale: 6 }
        ]
        // Works:
//        model: ListModel {
//            ListElement { displayName: "None"; roundedScale: 0 }
//            ListElement { displayName: "ExtraSmall"; roundedScale: 1 }
//            ListElement { displayName: "Small"; roundedScale: 2 }
//            ListElement { displayName: "Medium"; roundedScale: 3 }
//            ListElement { displayName: "Large"; roundedScale: 4 }
//            ListElement { displayName: "ExtraLarge"; roundedScale: 5 }
//            ListElement { displayName: "Full"; roundedScale: 6 }
//        }

        ColumnLayout {
            id: scaleLayout

            required property string displayName
            required property int roundedScale

            Label {
                text: scaleLayout.displayName
            }

            Repeater {
                model: 13

                Button {
                    text: scaleLayout.roundedScale

                    Material.elevation: modelData
                }
            }
        }
    }
}