I am having issues with GridLayout losing their column sizing inside a TabView whenever I go to another tab below the current index

An example is below where I am navigating from the 'Freaks' tab to the 'Legends' tab before it and the items inside the GridLayout lose their column position. All of them seem to revert back to column 0'. Both of the tabs uses the same component with only the data being passed as props being different.

Original GridLayout column position in 'Freaks' tab

GridLayout in 'Legends' tab losing column specifications

Gridlayout code would be

<GridLayout columns="40, *, auto" class="w-100 py-7 border-bottom-light" @longPress="optionsOpened">
    <TImage :col="0" :src="image" class="w-40 h-40 round" />
    <StackLayout :col="1" class="px-20" verticalAlignment="center">
        <Label class="text-13" :text="`${data.attributes.first_name} ${data.attributes.last_name}`" textWrap="true" />
        <Label v-if="role" class="text-11 text-grey text-capitalize" :text="data.attributes.jersey_number ? `#${data.attributes.jersey_number} ${role}` : role" />
    </StackLayout>
    <template v-if="!hide_action">
        <StackLayout class="action-container" :col="2" orientation="horizontal">
            <ActionTile class="at" :text="0xf00c" :is_icon="true" v-if="data.attributes.available == true" @tap.native="markAvailability(!data.attributes.available)" />
            <ActionTile class="at" color="red" :text="0xf00d" :is_icon="true" v-if="data.attributes.available == false" @tap.native="markAvailability(!data.attributes.available)" />
        </StackLayout>
    </template>
</GridLayout>

Has anyone encountered a similar issue? If so, what was your fix? Any help would be much appreciated.