LazyVGrid is not behaving lazily

Question

The following code creates a list of 20 view models(vm) and view displays only 6 at a time, but all 20 are created immediately. Any reason for that?

struct ContentView: View {
    @StateObject var vm = RMCharacterListResponseDownloadViewModel()
    
    let columns = Array(repeating: GridItem(.flexible(),spacing: 1, alignment: nil), count: 2)
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns) {
                ForEach(vm.items, id: \.self) { item in
                    RMCharacterView(viewModel: item)
                }
            }
            .padding(1)
        }
    }
}

struct RMCharacterView: View {
    let viewModel: RMCharacterViewModel
    private let imageWidth = 110.0
    private let cellHeight = 330.0

    var body: some View {
        CacheAsyncImage(
            url: viewModel.characterImageURL
        ) { phase in
            switch phase {
            case .success(let image):
                VStack {
                    CharacterCard(characterImage: image)
                    CharacterDescriptionView(viewModel: viewModel)
                }
            case .failure(let error):
                ErrorView(error: error)
            case .empty:
                VStack {
                    ProgressView()
                        .progressViewStyle(CircularProgressViewStyle(tint: .red))
                    Spacer()
                }
            @unknown default:
                // AsyncImagePhase is not marked as @frozen.
                // We need to support new cases in the future.
                Image(systemName: "questionmark")
            }
        }
    }
}

I expected only 6 cells would be created and each associated image would be downloaded, but all were created immediately.