Scenario

SignalR informs a listener of changes which need reflecting on the UI. When the underlying data changes we inform non-visually impaired users of the change by adding an animation effect before removing it 3 seconds later.

Question

Which of the following 'Code Options' is considered best practice when adding/removing the animation effect? Alternatively, is there another option I've not considered which might be better? Or, should it be situational?

Personal Considerations

The 'Boolean' option feels cleaner but it's one more element being watched on a reactive object, and a lot of these are likely to change in one fell swoop. If we manually modify the DOM without using a reactive object it might save on some overhead but it doesn't feel as clean.

Code Options

Update Class on Boolean

connection
    .on("EventName", (response: ResponseModel) => {
        const foo = this.FooArray
            .find((fooDetails: FooArrayModel) => fooDetails.Id === response.Id);

        foo.Name = response.Name;
        foo.HasUpdated = true;

        setTimeout(() => {
            foo.HasUpdated = false;
        }, 3000);
    });

<div class="row">
    <template v-for="foo in FooArray" :key="foo.Id">
        <div class="cell" aria-live="polite" :class="{ 'animation-class': foo.HasUpdated }">{{foo.Name}}</div>
    </template>
</div>

Update Class on ID

connection
    .on("EventName", (response: ResponseModel) => {
        const foo = this.FooArray
            .find((fooDetails: FooArrayModel) => fooDetails.Id === response.Id);

        foo.Name = response.Name;

        const element = document.getElementById(foo.Id);
        element.classList.add("animation-class");

        setTimeout(() => {
            element.classList.remove("animation-class");
        }, 3000);
    });

<div class="row">
    <template v-for="foo in FooArray" :key="foo.Id">
        <div class="cell" aria-live="polite" :id="foo.Id">{{foo.Name}}</div>
    </template>
</div>