Nativescript Vue: List data getting jumbled on top of each other

Question

I have a list of data and when it renders, it's rendering on top of each other. The data is a fairly long list of objects and I am using multiple fields. I made a playground example by reducing the data list size and only using field (display_name) and it's still happening. It seems to happen in random spots of the list but I am unsure as to how to resolve or more importantly, why it's happening. I thought it may have had to do with my key not being unique but I made sure it was and it's still happening. I included a playground and added screenshots. Any ideas?

Playground

Screenshots

EDIT: (Adding Template)

<RadListView
    for="(movie,index) in this.movies" 
    ref="listView"
    @loaded="onListLoaded($event)"
    @itemTap="onItemTap($event)"
    itemHeight="50"
    :key="index"
    gridSpanCount=1
>
    <v-template>
        <FlexboxLayout class="item-row" :key='`flex` + index' flexDirection="row" width="100%" height="100%" justifyContent="space-between">
            <Stacklayout orientation="horizontal">
                <Image :key='`img-flag` + index' marginTop="-22" class="flag-image" marginBottom="-22" :src="movie.image" height="100%" />
                <Label :key='`display-name` + index' :text="movie.display_name" />
            </Stacklayout>
            <Image :key='`heart-1` + index' @tap="handleToggleFavorite(movie)" width="20" :src="movie.favorite ? heartFilled : heartUnfilled" />
        </FlexboxLayout>
    </v-template>
</RadListView>

Answer 1

Looking at your mockup, I think you can achieve it with a simple GridLayout.

<v-template>
    <GridLayout columns="auto,*,auto" class="list-group-item">
        <Image col="0" :src="movie.image"
            class="m-5 thumb img-circle">
        </Image>
        <Label col="1" :text="movie.display_name"></Label>
        <Image col="2" src="path_to_icon" class="thumb">
        </Image>
    </GridLayout>
</v-template>