Отображение карточек Vuetify в одной строке вместо столбца. ⇐ Html

[Anonymous]

Для настройки макета я использую Vuetify 1.5 и систему сеток Vuetify. Теперь у меня есть компонент HelloWorld, который я импортирую в свой родительский компонент. Я настроил макет в HelloWorld и пытаюсь отображать свои карточки в одной строке, а не в столбце. Я не уверен, что я здесь делаю не так.
Я настроил , который должен отображать его в одной строке.
Ознакомьтесь с этой рабочей CodeSandbox.
Я не добавляю свое хранилище Vuex ниже, так как проблема в том, что в макете, а не в самих данных. Магазин минимален и находится по ссылке выше.
Это мой компонент HellWorld:

Код: Выделить всё

{{title}}







export default {
name: "HelloWorld",
props: {
title: String,
src: String,
id: Number
},
data() {
return {};
}
};

А это мой родительский компонент:

Код: Выделить всё

Parent Component










import { mapGetters, mapMutations } from "vuex";
import HelloWorld from "./HelloWorld";
import draggable from "vuedraggable";
export default {
components: {
draggable,
HelloWorld
},
computed: {
...mapGetters({
getCardArray: "getCardArray"
}),
draggableCards: {
get() {
return this.$store.state.cardArray;
},
set(val) {
this.$store.commit("setCardArray", val);
}
}
},
methods: {
...mapMutations({
setCardArray: "setCardArray"
})
}
};

По сути, я пытаюсь отображать карточки в ряд, а не в столбец.

Подробнее здесь: https://stackoverflow.com/questions/616 ... f-a-column