Some elements such as participants and video tracks are not working with Vue3 reactive

[JshGrn]

• I have verified that the issue occurs with the latest twilio-video.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

https://codesandbox.io/s/vue-composition-api-example-forked-j5dej

Expected behavior:

To use vue's reactivity system with participants and videotracks. audiotracks and most other things work fine. Worth noting that I mainly am interested in having the participants reactive but the same error results with participants as videotrack produces.

Actual behavior:

See error on sandbox

Software versions:

• Chrome & Firefox
• Windows 10
• twilio-video.js:
• Vue 3

[manjeshbhargav]

Hi @JshGrn ,

Sorry for the delayed response. I'm not familiar with how Vue3 reactive works, but I will investigate more and get back to you.

Thanks,

Manjesh

[KaelWD]

You probably need to use shallowReactive here.

vuejs/core#3024

[manjeshbhargav]

Thanks for the suggestion @KaelWD !

@JshGrn , I tried shallowReactive and it did indeed work! I think you can use this instead of reactive. I'll close the issue, but we can continue the conversation here if you need more clarification.