chore: define explicit reactivity for webrtc models

[DorraJaouad]

☑️ Resolves

• Fix Always use reactive for external object that made reactive by putting in components data #9450

Components affected

• CallView
• TopBar
• TopBarMediaControls

🏁 Checklist

• 🌏 Tested with Chrome, Firefox and Safari or should not be risky to browser differences
• 🖥️ Tested with Desktop client or should not be risky for it
• 🖌️ Design was reviewed, approved or inspired by the design team
• ⛑️ Tests are included or not possible
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required

---

[ShGKme]

[Vue warn]: Avoid using Array as root value for reactive() as it cannot be tracked in watch() or watchEffect(). Use ref() instead. This is a Vue-2-only limitation.

As we don't use it in watch or watchEffect, reactive would also work here.

Though, it will show the error in the console...
So, I don't know what is the best way here

[DorraJaouad]

Yes, reactive works fine but those errors were annoying, I would keep ref temporarily.

[ShGKme]

Thanks for separating into commits ☺️

[Antreesy]

/backport to stable29