Websocket API: self generating dynamic dashboard in a Vue app

The idea is to integrate a dynamic layout which builds upon reading the JSON. Right now I already have the Websocket up & running, figured out how to call HA to give a list of all my services and use these credentials to control my Spotify (mainly as a test for the websocket connection).

Here’s my issue. To control Spotify I have a simple <button> which calls a function playButtonSpotify. This function contains:

function playButtonSpotify() {
    ws.send(JSON.stringify({
        "id": incrementedCallId(),
        "type": "call_service",
        "domain": "media_player",
        "service": "media_play_pause",
        "service_data": {
            "entity_id": "media_player.spotify_my_username"
        }
    }));
}

This works…

But I’m lazy and don’t want to recreate this piece of code for every media player and I also want to be able to use one Vue component for every media player.

Does anybody know if it’s possible to create a button in a Vue app which calls the HA services list (already figured this out) (1) saves this list in a JSON file (2) loops over this list to (3) dynamically create my layout?

I know this is a big question, and I’m not necessarily asking to help me out with writing all of this. I would be very happy with somebody pointing me towards the right tutorials, plugins or parts of Vue.

Thanks in advance!

Development’s description is

Discuss the Home Assistant core and platforms. Visit the Documentation to get started.

This should probably go in Third party integrations. Also I know in plain old JS, you could improve the function to just take an argument instead of having an entity hard-coded.