How to implement OOP on VUE?

Question

Vue.js

Hello. I wrote a training application in js that scans the network for open websocket connections, receives data and visualizes them. It works like this: the network is scanned, if there is an open websocket connection c readyState === 1, an instance of the class is created CreateDataCardin this instance, an instance of the class is created CreateViewCard. Well, at the output we get as many cards with data as there are open websocket connections, and, accordingly, each card has its own data and its own representation. How to implement the same in Vue? After all, Vue has one datafor the entire application.

Answer 1

data of the main Vue instance will contain an array of data objects of discovered sockets.
From this array, render a list of socket view components.
Understand components in Vue . Although it may be possible to get by with just the lines of an HTML list.
A good hackneyed example for a similar task - Todo App