Use of reactive rather than ref for useProgressTracking state causing potentially unreported reactivity issues

[rtibbles]

Observed behavior

useProgressTracking.js:88 [Vue warn]: Avoid using Array as root value for reactive() as it cannot be tracked in watch() or watchEffect(). Use ref() instead. This is a Vue-2-only limitation.

found in

---> <ContentPage> at kolibri/plugins/learn/assets/src/views/ContentPage.vue
       <TopicsContentPage> at kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
         <NotificationsRoot> at packages/kolibri/components/pages/NotificationsRoot/index.vue
           <Root>

Expected behavior

Ensure that Arrays are refs rather than reactives, and that any associated updates are reassigning the entire ref rather than using array methods.

User-facing consequences

Possible reactivity issues leading to misleading frontend behaviour, and in some cases, log data not being saved.

Steps to reproduce

Open any resource in learn

Context

• Kolibri version: develop/0.18