В чем ошибка вывода вложенного массива?

Question

[msdoc11]

<div id="app">
        <div class="columns medium-3" v-for="result in results" :key="result.resultId">
            <div class="card">
                <div v-for="image in images" :key="image.imageId">
                    <input type="radio" v-model="profileImg" name="profileImg" :value="image.imgId"> Choose image
                </div>
                You have selected : {{profileImg}}
            </div>
            <div class="card-divider">
                {{ result.title }}
            </div>
            <div class="card-section">
                <ul>
                    <li>{{ result.sizes.join(' ') }}</li>
                </ul>
            </div>
        </div>
    </div>

const vm = new Vue({
            el: '#app',
            data: {

                results: [{
                    images: [{
                        imgId: 1
                    }, {
                        imgId: 2
                    }, {
                        imgId: 3
                    }],
                    profileImg: 2,
                    title: "iPhone 11 Pro Max",
                    sizes: [
                        '68GB', '256GB', '512GB'
                    ]
                }, {
                    images: [{
                        imgId: 1
                    }, {
                        imgId: 2
                    }, {
                        imgId: 3
                    }],
                    profileImg: 2,
                    title: "iPhone 11 Pro",
                    sizes: [
                        '68GB', '256GB'
                    ]
                }, {
                    images: [{
                        imgId: 1
                    }, {
                        imgId: 2
                    }, {
                        imgId: 3
                    }],
                    profileImg: 2,
                    title: "iPhone 11",
                    sizes: [
                        '68GB', '512GB'
                    ]
                }, {
                    images: [{
                        imgId: 1
                    }, {
                        imgId: 2
                    }, {
                        imgId: 3
                    }],
                    profileImg: 2,
                    title: "iPhone XR",
                    sizes: [
                        '256GB', '512GB'
                    ]
                }]
            }
        });

Answer 1

[0xD34F]

Вместо v-for="image in images" должно быть v-for="image in result.images".

Вместо v-model="profileImg" и {{profileImg}} должно быть v-model="result.profileImg" и {{ result.profileImg }}.

Чтобы группы радиокнопок работали независимо, вместо статичного name="profileImg" значение name должно вычисляться динамически, в зависимости от result (например - добавляйте id, если есть, или индекс).

Вместо <li>{{ result.sizes.join(' ') }}</li> должно быть <li v-for="size in result.sizes">{{ size }}</li>.