How to deal with fragment masking and arrays in vue

[Satont]

Right now i'm casting fragment inside vue template. How it can be done in more elegant way? I checked nested fragments example, but it's not represent how to use that for arrays.

Right now i have to cast fragment of fragment to right type inside template, but it feels ugly.

Fragments:

export const ChatMessage_Fragment = graphql(`
  fragment ChatMessage_Fragment on ChatMessage {
    id
    segments {
      type
      content
      ... on MessageSegmentMention {
        user {
          id
          color
          displayName
        }
      }
      ... on MessageSegmentEmote {
        emote {
          ...ChatEmote_Fragment
        }
      }
    }
    sender {
      id
      avatarUrl
      color
      createdAt
      name
      displayName
      roles {
        id
        name
        features
        channelId
        imageUrl
      }
    }
    createdAt
    reactions {
      ...ChatReaction_Fragment
    }
    replyTo
  }
`)

export const ChatEmote_Fragment = graphql(`
  fragment ChatEmote_Fragment on Emote {
    id
    name
    url
    width
    height
  }
`)

Component:

type Props = {
  msg: FragmentType<typeof ChatMessage_Fragment>
  isReply?: boolean
}
const props = defineProps<Props>()
const unwrappedMessage = useFragment(ChatMessage_Fragment, props.msg)

<template v-for="segment of unwrappedMessage.segments">
  <template v-if=" segment.type === MessageSegmentType.Emote && 'emote' in segment">
          <img
                  :src="(segment.emote as ChatEmote_FragmentFragment).url"
                  :style="{
                    width: `${(segment.emote as ChatEmote_FragmentFragment).width}px`,
                    height: `${(segment.emote as ChatEmote_FragmentFragment).height}px`
                  }"
                  class="scale-90 inline-block relative"
                />
   </template>
</template>