Virtual scroll performance

I have a Virtual Scroll displaying a list of messages to the user (inbox, saved, deleted). Clicking on a button changes the filter, and the messages displayed. Looking for the best performance solution.

Is it better to have one virtual scroll component and a single data set, which is filtered to display certain items? Or would it be better to create three virtual scroll components with their own datasets, and just hide/show the appropriate one?

Here’s what my current dataset code looks like

    private messages: Message[] = [];
    get filteredMessages() {
        return this.messages.filter((msg) => {
            return msg.messageType === ~~this.selectedMessageType;

I’m debating about splitting this into three data sources that are immutable. I’m worried that this implementation is impacting performance. But that’s a lot of changes right now.