VueJS table - can't figure out why this doesn't work.

I'm trying to build an app with Vue and cannot figure out what is wrong with the table rendering part of my code.

<div id="app" class="container">
{{selectedValue}}
{{ui_switch}}
<table>
                <thead>
                    <tr>
                        <th>Size</th>
                        <th>UI</th>
                        <th>Proportion</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="size in sizes">
                        <td>{{ size.size }}</td>
                        <td>{{ size.ui }}</td>
                        <td>{{ size.proportion }}</td>
                    </tr>
                </tbody>
            </table>
</div>

       const { createApp, ref } = Vue;
        const appData = {
            selectedValue: 'print_only',
            ui_switch: 800,
            sizes: [
                {
                    'size': '8x12',
                    'ui': 96,
                    'proportion': '2x3'
                }, {
                    'size': '10x15',
                    'ui': 150,
                    'proportion': '2x3'
                }, {
                    'size': '12x18',
                    'ui': 216,
                    'proportion': '2x3'
                },
            ],
            items: {
                'print_only': {
                    'high_price': 0.55,
                    'low_price': 0.52
                },
                'slimline': {
                    'high_price': 0.88,
                    'low_price': 0.83
                },
                'floater': {
                    'high_price': 0.95,
                    'low_price': 0.91
                },
                'custom_size': {
                    'high_price': 1.95,
                    'low_price': 1.91
                }
            }
        };

        createApp({
            data: function () {
                return {
                    items: appData.items,
                    sizes: appData.sizes,
                    selectedValue: appData.selectedValue,
                    ui_switch: appData.ui_switch,
                };
            },
            methods: {
                calculate: function (event) {

                }
            }
        }).mount('#app')

I keep getting this error Uncaught TypeError: Cannot read properties of undefined (reading 'size')

Commenting out all of the <td>{{size...}}</td> clears the error. Other parts of the app where I render out selectedValue and ui_switch works fine.

What hyper-simple thing am I overlooking?