How costly is state.dirty(...) on a large struct?

[DavidBerger98]

I have a state variable that holds a list of dictionaries. Each dictionary holds information about tasks that are run on the server, like the status, current progress, logs, etc.
These tasks are visualized in the front-end via a list and depending on the content of each dict, the list item shows a progress bar, some status icons and so on.
Whenever I update some property of a task, I need to run state.dirty("tasks") to force an update on the UI. In the case of the current progress, I have a co-routine that periodically checks the progress of a running task and updates the progress value and sets "tasks" to dirty again, so that the progress bar is updated.

I was asking myself, how costly that is on the server, if say I have a list of 100 tasks (probably up to a MB as a JSON file) and have 5 running tasks that each update the progress bar every second.
Is the whole JSON sent over the network if an update is triggered or only the diff?

It would probably be smarter to have a separate state variable for the progress updates?

[jourdain]

Yes you should separate things. The full "tasks" object tree is sent again.

You have the option to dynamically add keys to your state if that can help.

[DavidBerger98]

Actually, if I went with the dynamic apporach, how would I then use the dynamically created keys in e.g. a v_if statement?

Say I create the progress keys like this in Python:

state[f"{task.id}_progress"] = current_progress

I then want to list the tasks with their current progress in a VList like this:

with vuetify.VList():
    with vuetify.VListItem(
        v_for=("task in tasks",),
        key=("task.id",),
    ):
        with vuetify.VListItemContent():
            vuetify.VListItemTitle("{{ task.id }}")
            vuetify.VListItemSubtitle(
                "{{ current_progress }}",
                v_if=("current_progress < 100",),
            )
            vuetify.VListItemSubtitle(
                "Finished",
                v_else=True,
            )

What do I need to write for current_progress?

[jourdain]

See the get method.

{{ get(`${task.id}_progress`) }}

[DavidBerger98]

Isn't there a problem with the reactivity in that case? How does VueJS know to recompute get('${task.id}_progress') if the variable was changed?