What are the ways to pass a vue component over the network?

Question

Vue.js

Good afternoon.
The student has the opportunity to take tests. It is necessary to make sure that when interacting with the test (giving an answer, clicking somewhere, etc.), the teacher can observe all the changes that the student has made.
That is, the student clicked on the answer option, and the teacher displayed which option he chose.
How to implement such functionality correctly?
I have 2 options.
1. With any data, transfer them from the student to the teacher. Then replace the teacher's data with the student's data. Like this: this.task = studentTaskData. This method is working, but tedious.
2. Pass the entire modified component on any change. That is, I completely pass all tasks as html elements. Then you don’t have to think about what data I am transmitting and what I am receiving, but the amount of data will increase noticeably.
Right now I have a p2p connection and a socket connection. In my opinion, p2p will transmit and receive such a large data stream without problems, but it is already loaded with sending and receiving videos.
Maybe there are easier ways or one of these is still correct?

Answer 1

There are a million options, but the first thing that comes to my mind is that there is a Subscription in the GraphQL protocol implementations. And this protocol is very fond of front-end frameworks. May come up. But not necessarily