$state.snapshot does not work on deep state when using class

[quaintdev]

Describe the bug

I have below two classes

class ChatStore {
	private chats: Record<string, Chat> = $state({});
	private readonly STORAGE_KEY = 'Chats';

	constructor() {
		this.chats = LocalStorageService.getItem<Record<string, Chat>>(this.STORAGE_KEY) || {};
	}

	private save(): void {
		console.log($state.snapshot(this.chats));
		LocalStorageService.setItem(this.STORAGE_KEY, $state.snapshot(this.chats));
	}
}

and Chat class as follows

export class Chat {
	uuid: string = '';
	title: string = '';
	messages: Message[] = $state<Message[]>([]);

	constructor() {
		this.uuid = uuidv4();
	}

	appendMessage(text: string, role: string) {
		if (this.messages.length == 0) {
			this.title = text.substring(0, 25);
		}
		this.messages.push(new Message(this.messages.length + 1, text, role));
	}
}

The reactivity and everything is working properly but the moment I want to take $state.snapshot(this.chats) it drops the messages array altogether. I only see uuid and title of chat. Any suggestions?

Reproduction

Embed $state inside $state class as shown above

Logs

System Info

I think this is issue with the framework and not my system. Still if it is required, let me know.

Severity

annoyance