Ошибка: из функции рендеринга возвращено несколько корневых узлов. из v-item-group

Я использую Vuex с Vuetify.

Я пытаюсь создать компонент v-dialog. Форма выглядит нормально, но изображения из v-item-group отсутствуют.

Компонент Vue

<template>
    <v-row justify="center">
        <v-dialog v-model="isDoorDimDialog" max-width="800px">
            <template v-slot:activator="{ on }">
                <v-btn color="primary" dark v-on="on">Add</v-btn>
            </template>
            <v-card>
                <v-card-title>
                <span class="headline">Select Door Dimensions:</span>
                </v-card-title>
                <v-card-text>
                    <v-container>
                        <v-row>

                            <v-col cols="12" sm="6" md="4">
                                <v-text-field 
                                    label="Height*" 
                                    required>
                                </v-text-field>
                            </v-col>

                            <v-col cols="12" sm="6" md="4">
                                <v-text-field 
                                    label="Width" 
                                    hint="example of helper text only on focus">
                                </v-text-field>
                            </v-col>

                            <v-col>
                            <v-item-group v-model="selectedType" mandatory>
                                <v-row>
                                    <v-col
                                        v-for="(img, name) in imgTypes"
                                        :key="name"
                                        cols="12"
                                        md="6"
                                    >
                                        <v-item v-slot:default="{ active, toggle }">
                                            <v-img
                                                :src="`{{img}}`"
                                                height="150"
                                                class="text-right pa-2"
                                                @click="toggle"
                                            >
                                                <v-scroll-y-transition>
                                                    <div
                                                        v-if="active"
                                                        class="display-3 flex-grow-1 text-center"
                                                    >
                                                    Active
                                                    </div>
                                                </v-scroll-y-transition>
                                            </v-img>
                                            <h3>{{name}} Door</h3>
                                        </v-item>
                                    </v-col>
                                </v-row>
                            </v-item-group>
                            </v-col>
                        </v-row>
                    </v-container>
                    <small>*indicates required field</small>
                </v-card-text>
                <v-card-actions>
                    <div class="flex-grow-1"></div>
                        <v-btn 
                            color="blue darken-1" 
                            text 
                            @click="isDoorDimDialog = false">Close
                        </v-btn>
                        <v-btn 
                            color="blue darken-1" 
                            text 
                            @click="isDoorDimDialog = false">Save
                        </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-row>
</template>

<script>
import { mapState } from 'vuex';
export default {
    computed: {
        ...mapState('addDoors', {
            imgTypes: state => state.imgTypes
        }),
        isDoorDimDialog: {
            set(isDoorDimDialog) {
                this.$store.commit('addDoors/setIsDoorDimDialog', isDoorDimDialog);
            },
            get() {
                return this.$store.state.addDoors.isDoorDimDialog;
            }
        },
        selectedType: {
            set(selectedType) {
                this.$store.commit('addDoors/setSelectedType', selectedType);
            },
            get() {
                return this.$store.state.addDoors.selectedType;
            }
        }
    },

}
</script>

<style scoped>

</style>

Вьюекс

export const addDoors = {
    namespaced: true,
    state: {
        isDoorDimDialog: false,
        imgTypes: {
            Standard: '@/assets/door-icons/icon-doors-standard.png',
            Sliding: '@/assets/door-icons/icon-doors-sliding.png',
            Balcony: '@/assets/door-icons/icon-doors-balcony.png'
        },
        selectedType: ''
    },
    mutations: {
        setIsDoorDimDialog(state, isDoorDimDialog) {
            state.isDoorDimDialog = isDoorDimDialog;
        },
        setSelectedType(state, selectedType) {
            state.selectedType = selectedType;
        }
    },
    actions: {

    }
}

После того, как я добавил v-item-group, я получаю сообщение об ошибке:

[Предупреждение Vue]: функция рендеринга возвращает несколько корневых узлов. Функция рендеринга должна возвращать один корневой узел.

Изображения тоже не отображаются.

Как мой код точно создает несколько корневых узлов?