Enh/noid/use custom component for breakoutrooms

[marcoambrosini]

also fixes #8900

[Antreesy]

I'd like to go with proposed solution:

1. if we want to add toggle logic to the rooms in the future;
2. as rooms and participants are semantically different lists

[Antreesy]

Suggested change

	<Fragment>
	<li :key="roomName"
	class="breakout-room-item">
	<li :key="roomName">
	<div class="breakout-room-item">

[Antreesy]

Suggested change

	</Fragment>
	</div>
	<ul class="breakout-room-item__participants">
	<Participant v-for="participant in roomParticipants"
	:key="participant.actorId"
	:participant="participant" />
	</ul>
	</li>