Refactor watchers to computed in lib/cards

[MisRob]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Background

During the initial implementation of KCard and KCardGrid, in some places I used watchers instead of computed, even though computed would be more suitable.

One example:

https://github.com/learningequality/kolibri-design-system/blob/619ab59f954204ee18dd0b30e0e3e8ed8d75b0a1/lib/cards/KCardGrid.vue#L80-L104

Here, it'd make more sense for gridStyle and gridItemStyle be computed rather than getting reassigned within a watcher.

I didn't use computed because I experienced problems with reactivity that I wasn't able to resolve. Initial debugging led me to some issues with useKResponsiveWindow's reactivity, but I didn't manage to completely understand and fix the source of the problem.

Summary

The goal of this issue is to

• Refactor the example above to use computed
• Audit all other watchers in lib/card files and whenever relevant, refactor them to computed too
• While not causing regressions in any of the reactive and responsive behaviors of cards and card grids

There's a little chance is that the reactivity issue got fixed with the recent Vue version update. However if the above is still blocked, in the scope of this issue it is to continue debugging and if possible to resolve everything that blocks this refactor.

Last resort would be to at least leave a code comment for the affected watchers that explains why computed couldn't be used exactly as per @rtibbles's comment.

The Value Add

Reduces tech debt:

• computed is more intuitive mental model for some of the affected places
• computed is generally more performant than watch