Why Do CollectionView Items Appear Empty in My Published .NET MAUI App?

I've built a small .NET MAUI application in Visual Studio that downloads a JSON file containing 10 players and loads them into a CollectionView. When debugging in the IDE, the players display correctly and the JSON shows in the editor; however, when running from the debug folder, I only see 10 empty outlines in the CollectionView without any IDs or Names, even though the JSON appears in the editor.

I followed this tutorial: https://www.youtube.com/watch?v=GgU4ulGYQEk

Here is the relevant code:

CSHARPCopied
public partial class PlayerListViewModel: ObservableObject {

    [ObservableProperty]
    public string text = "";

    public PlayerListViewModel() {
        PlayerListItems = new ObservableCollection<Player>();
    }

    [ObservableProperty]
    ObservableCollection<Player> playerListItems;

    [RelayCommand]
    public void View() {

    }

    [RelayCommand]
    async Task getPlayersAPI() {

        HttpClient _httpClient = new HttpClient();
        string _url = "https://mywebsite.com/all-players.php";

        var response = await _httpClient.GetAsync(_url);
        var responseString = await response.Content.ReadAsStringAsync();
        var playerListItems = JsonSerializer.Deserialize<List<Player>>(responseString);

        Text = responseString.ToString();

        PlayerListItems.Clear();
        foreach(var item in playerListItems) {
            PlayerListItems.Add(item);
        }

    }

}

CSHARPCopied
public class Player {
    public int Id {
        get;
        set;
    }
    public required string fullName {
        get;
        set;
    }
    public required string imageSrc {
        get;
        set;
    }
    public required string countryFlag {
        get;
        set;
    }

}

JSONCopied
[
  {
    "Id": 577,
    "fullName": "Bob Smith",
    "imageSrc": "ProfileImage.webp",
    "countryFlag": "us.svg"
  },
  {
    "Id": 744,
    "fullName": "George Kingford",
    "imageSrc": "ProfileImage.webp",
    "countryFlag": "ca.svg"
  }
]

XMLCopied
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyProject.PlayerList"
             Title="PlayerList"
             xmlns:viewmodel="clr-namespace:MyProject.ViewModel"
             x:DataType="viewmodel:PlayerListViewModel">


        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="100"></RowDefinition>
                <RowDefinition Height="200"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="50"></RowDefinition>
        </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="300"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>


            <Button x:Name="getBtn" Text="Load" Command="{Binding getPlayersAPICommand}" Margin="10" HeightRequest="30" Grid.Column="1"></Button>
            <Editor x:Name="testData" Text="{Binding Text}" Margin="10" Grid.Column="1" Grid.Row="1"></Editor>

            <ScrollView Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" VerticalOptions="End" VerticalScrollBarVisibility="Always"  >

            <CollectionView ItemsSource="{Binding PlayerListItems}" EmptyView="No players downlaoded" SelectionMode="Single" >
                <CollectionView.Header>
                    <VerticalStackLayout>
                        <Label Text="Players" HorizontalOptions="Center" FontAttributes="Bold" FontSize="18"></Label>
                    </VerticalStackLayout>
                </CollectionView.Header>
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="{x:Type viewmodel:PlayerListViewModel}">
                        <SwipeView>
                            <SwipeView.RightItems>
                                <SwipeItem Text="Edit" BackgroundColor="Green" />
                            </SwipeView.RightItems>

                            <Grid Padding="10">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="50"></ColumnDefinition>
                                    <ColumnDefinition Width="auto"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="50*"></RowDefinition>
                                    <RowDefinition Height="50*"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="1" HeightRequest="30" Source="{Binding Source, Source={x:Reference countryFlag}}"></Image>
                                <Label Grid.Column="1" Grid.Row="0" Text="{Binding fullName}" FontAttributes="Bold" ></Label >
                                <HorizontalStackLayout Grid.Column="1" Grid.Row="1">
                                    <Label Text="ID: "></Label >
                                    <Label TextColor="Black" Text="{Binding Id}" ></Label >
                                </HorizontalStackLayout>
                            </Grid>

                        </SwipeView>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
               
            </CollectionView>
            </ScrollView>

         </Grid>

</ContentPage>

Based on feedback in the answers, it seems likely that the issue is caused by setting the DataTemplate's x:DataType to the PlayerListViewModel instead of the Player class, so the item bindings (like fullName and Id) are not found. Does anyone have further insights or solutions?