From 72b3a8b1637313cf01722d5dae3e9465357b9afd Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Tue, 10 Dec 2024 18:41:30 -0800
Subject: [PATCH] Upgrade to vue2.7 and remove @vue/composition-api.

---
 .../assets/src/state/modules/core/actions.js  |   6 +-
 .../assets/src/composables/useCoachTabs.js    |   2 +-
 .../assets/src/composables/useCoreCoach.js    |   2 +-
 .../assets/src/composables/useFetchTree.js    |   2 +-
 .../coach/assets/src/composables/useGroups.js |   2 +-
 .../assets/src/composables/useLessons.js      |   2 +-
 .../assets/src/composables/useQuizCreation.js |   2 +-
 .../src/composables/useQuizResources.js       |   2 +-
 .../assets/src/composables/useQuizzes.js      |   2 +-
 .../assets/src/modules/lessonsRoot/index.js   |   4 +-
 .../src/views/groups/GroupsRootPage/index.vue |   2 +-
 .../ContentCardList.vue                       |   2 +-
 .../views/lessons/LessonSummaryPage/index.vue |   2 +-
 .../sidePanels/LessonResourceSelection.vue    |   2 +-
 .../src/views/lessons/LessonsRootPage.vue     |   4 +-
 .../CreateExamPage/CreateQuizSection.vue      |   2 +-
 .../CreateExamPage/QuestionListPreview.vue    |   2 +-
 .../CreateExamPage/ReplaceQuestions.vue       |   2 +-
 .../CreateExamPage/ResourceSelection.vue      |   2 +-
 .../quizzes/CreateExamPage/SectionEditor.vue  |   2 +-
 .../quizzes/CreateExamPage/SectionOrder.vue   |   2 +-
 .../CreateExamPage/SectionSidePanel.vue       |   2 +-
 .../views/quizzes/CreateExamPage/index.vue    |   2 +-
 .../src/views/quizzes/ExamsRootPage.vue       |   2 +-
 .../coach/assets/test/useQuizCreation.spec.js |   8 +-
 .../assets/src/composables/useContentTasks.js |   2 +-
 .../src/composables/useDeviceRestart.js       |   2 +-
 .../assets/src/composables/usePlugins.js      |   2 +-
 .../src/views/DeviceSettingsPage/index.vue    |   2 +-
 .../assets/src/modules/importCSV/index.js     |  14 +-
 .../assets/src/modules/manageCSV/index.js     |   4 +-
 .../views/ManageClassPage/useDeleteClass.js   |   2 +-
 .../src/composables/__mocks__/useDevices.js   |   2 +-
 .../__tests__/useProgressTracking.spec.js     |   2 +-
 .../composables/__tests__/useSearch.spec.js   |  13 +-
 .../src/composables/useCardLayoutSpan.js      |   2 +-
 .../src/composables/useCardViewStyle.js       |   2 +-
 .../assets/src/composables/useContentLink.js  |   2 +-
 .../src/composables/useContentNodeProgress.js |   2 +-
 .../assets/src/composables/useCoreLearn.js    |   2 +-
 .../src/composables/useDeviceSettings.js      |   2 +-
 .../assets/src/composables/useDevices.js      |   2 +-
 .../src/composables/useDownloadRequests.js    |   3 +-
 .../src/composables/useLearnerResources.js    |   2 +-
 .../src/composables/useLearningActivities.js  |   2 +-
 .../src/composables/usePinnedDevices.js       |   2 +-
 .../src/composables/useProgressTracking.js    |   2 +-
 .../views/DownloadsList/index.vue             |   2 +-
 .../src/my_downloads/views/MyDownloads.vue    |   2 +-
 .../learn/assets/src/views/ContentPage.vue    |   2 +-
 .../src/views/DeviceConnectionStatus.vue      |   2 +-
 .../src/views/ExploreLibrariesPage/index.vue  |   2 +-
 .../src/views/HomePage/ContinueLearning.vue   |   2 +-
 .../views/HomePage/__tests__/HomePage.spec.js |   2 +-
 .../learn/assets/src/views/HomePage/index.vue |   2 +-
 .../src/views/LearningActivityLabel/index.vue |   2 +-
 .../src/views/LibraryPage/OtherLibraries.vue  |   2 +-
 .../LibraryPage/ResumableContentGrid.vue      |   2 +-
 .../assets/src/views/LibraryPage/index.vue    |   2 +-
 .../src/views/ResourceSyncingUiAlert.vue      |   2 +-
 .../assets/src/views/SearchResultsGrid.vue    |   2 +-
 .../assets/src/views/TopicsContentPage.vue    |   2 +-
 .../assets/src/views/TopicsPage/index.vue     |   2 +-
 .../views/classes/AssignedQuizzesCards.vue    |   2 +-
 .../views/classes/ClassAssignmentsPage.vue    |   2 +-
 .../assets/test/views/topics-page.spec.js     |  49 ++++--
 .../assets/src/composables/useCurrentUser.js  |   2 +-
 .../assets/src/composables/useOnMyOwnSetup.js |   2 +-
 .../ChangeFacility/ChooseAdmin/index.vue      |   2 +-
 .../src/views/ChangeFacility/ConfirmMerge.vue |   2 +-
 .../ConfirmAccountDetails.vue                 |   2 +-
 .../MergeAccountDialog/index.vue              |   2 +-
 .../MergeDifferentAccounts/index.vue          |   2 +-
 .../views/ChangeFacility/MergeFacility.vue    |   2 +-
 .../views/ChangeFacility/SelectFacility.vue   |   2 +-
 .../views/ChangeFacility/UsernameExists.vue   |   2 +-
 .../assets/src/views/ChangeFacility/index.vue |   2 +-
 .../assets/src/views/ProfilePage/index.vue    |   2 +-
 .../components/SearchFiltersPanel/index.vue   |   2 +-
 .../SyncSchedule/ManageSyncSchedule.vue       |   2 +-
 .../accordion/AccordionContainer.vue          |   2 +-
 .../components/accordion/useAccordion.js      |   2 +-
 .../quizzes/QuizReport/AttemptLogList.vue     |   2 +-
 .../SelectDeviceForm.vue                      |   2 +-
 .../useConnectionChecker.js                   |   2 +-
 .../useDeviceDeletion.js                      |   2 +-
 .../SelectDeviceModalGroup/useDevices.js      |   2 +-
 .../kolibri-common/components/useAccordion.js |   2 +-
 .../__tests__/useBaseSearch.spec.js           |  13 +-
 .../composables/useBaseSearch.js              |   2 +-
 .../kolibri-common/composables/useChannels.js |   2 +-
 .../composables/useCoachMetadataTags.js       |   2 +-
 .../composables/useUserSyncStatus.js          |   2 +-
 packages/kolibri-tools/jest.conf/setup.js     |   2 -
 packages/kolibri-tools/lib/moduleMapping.js   |   2 +-
 .../lib/webpack.config.plugin.js              |  11 +-
 packages/kolibri-tools/package.json           |   2 +-
 packages/kolibri/__tests__/heartbeat.spec.js  |   2 +-
 .../pages/AppBarPage/internal/AppBar.vue      |   2 +-
 .../internal/__tests__/TotalPoints.spec.js    |   2 +-
 .../composables/__mocks__/useSnackbar.js      |   2 +-
 .../composables/__mocks__/useTotalProgress.js |   2 +-
 .../kolibri/composables/__mocks__/useUser.js  |   2 +-
 .../composables/internal/useScrollPosition.js |   2 +-
 packages/kolibri/composables/useNav.js        |   2 +-
 packages/kolibri/composables/useNow.js        |   2 +-
 packages/kolibri/composables/useSnackbar.js   |   2 +-
 .../kolibri/composables/useTotalProgress.js   |   2 +-
 packages/kolibri/composables/useUser.js       |   2 +-
 packages/kolibri/index.js                     |   2 -
 packages/kolibri/internal/apiSpec.js          |   1 -
 packages/kolibri/internal/useConnection.js    |   2 +-
 packages/kolibri/package.json                 |  10 +-
 .../styles/internal/initializeTheme.js        |   4 +-
 yarn.lock                                     | 166 ++++++++++--------
 115 files changed, 272 insertions(+), 238 deletions(-)

diff --git a/kolibri/core/assets/src/state/modules/core/actions.js b/kolibri/core/assets/src/state/modules/core/actions.js
index 24f000ddae9..a7c12c112db 100644
--- a/kolibri/core/assets/src/state/modules/core/actions.js
+++ b/kolibri/core/assets/src/state/modules/core/actions.js
@@ -10,7 +10,7 @@ import { setServerTime } from 'kolibri/utils/serverClock';
 import urls from 'kolibri/urls';
 import redirectBrowser from 'kolibri/utils/redirectBrowser';
 import CatchErrors from 'kolibri/utils/CatchErrors';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import Lockr from 'lockr';
 import {
   DisconnectionErrorCodes,
@@ -202,7 +202,7 @@ export function getFacilityConfig(store, facilityId) {
 export function loading(store) {
   return new Promise(resolve => {
     store.commit('CORE_SET_PAGE_LOADING', true);
-    Vue.nextTick(() => {
+    nextTick(() => {
       resolve();
     });
   });
@@ -211,7 +211,7 @@ export function loading(store) {
 export function notLoading(store) {
   return new Promise(resolve => {
     store.commit('CORE_SET_PAGE_LOADING', false);
-    Vue.nextTick(() => {
+    nextTick(() => {
       resolve();
     });
   });
diff --git a/kolibri/plugins/coach/assets/src/composables/useCoachTabs.js b/kolibri/plugins/coach/assets/src/composables/useCoachTabs.js
index f1a827eae4c..4bbbda090d4 100644
--- a/kolibri/plugins/coach/assets/src/composables/useCoachTabs.js
+++ b/kolibri/plugins/coach/assets/src/composables/useCoachTabs.js
@@ -19,7 +19,7 @@
  * Then when you need find out if tabs were clicked recently,
  * call `wereTabsClickedRecently`.
  */
-import { reactive } from '@vue/composition-api';
+import { reactive } from 'vue';
 
 // tabs interaction is considered to be recent
 // when it's not older than ...
diff --git a/kolibri/plugins/coach/assets/src/composables/useCoreCoach.js b/kolibri/plugins/coach/assets/src/composables/useCoreCoach.js
index 8cc05a553c6..c6e09633559 100644
--- a/kolibri/plugins/coach/assets/src/composables/useCoreCoach.js
+++ b/kolibri/plugins/coach/assets/src/composables/useCoreCoach.js
@@ -1,7 +1,7 @@
 import find from 'lodash/find';
 import logger from 'kolibri-logging';
 import { get } from '@vueuse/core';
-import { computed, getCurrentInstance } from '@vue/composition-api';
+import { computed, getCurrentInstance } from 'vue';
 import { currentLanguage, isRtl } from 'kolibri/utils/i18n';
 import useUser from 'kolibri/composables/useUser';
 import { coachStrings } from '../views/common/commonCoachStrings';
diff --git a/kolibri/plugins/coach/assets/src/composables/useFetchTree.js b/kolibri/plugins/coach/assets/src/composables/useFetchTree.js
index d3ba1963277..85a5b861db2 100644
--- a/kolibri/plugins/coach/assets/src/composables/useFetchTree.js
+++ b/kolibri/plugins/coach/assets/src/composables/useFetchTree.js
@@ -1,5 +1,5 @@
 import { get, set } from '@vueuse/core';
-import { computed, ref } from '@vue/composition-api';
+import { computed, ref } from 'vue';
 import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
 
 /**
diff --git a/kolibri/plugins/coach/assets/src/composables/useGroups.js b/kolibri/plugins/coach/assets/src/composables/useGroups.js
index 0c7cc67ad42..fa61b5eab88 100644
--- a/kolibri/plugins/coach/assets/src/composables/useGroups.js
+++ b/kolibri/plugins/coach/assets/src/composables/useGroups.js
@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import samePageCheckGenerator from 'kolibri-common/utils/samePageCheckGenerator';
 import LearnerGroupResource from 'kolibri-common/apiResources/LearnerGroupResource';
 import FacilityUserResource from 'kolibri-common/apiResources/FacilityUserResource';
diff --git a/kolibri/plugins/coach/assets/src/composables/useLessons.js b/kolibri/plugins/coach/assets/src/composables/useLessons.js
index bed80183fb9..771d19b9998 100644
--- a/kolibri/plugins/coach/assets/src/composables/useLessons.js
+++ b/kolibri/plugins/coach/assets/src/composables/useLessons.js
@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import LearnerGroupResource from 'kolibri-common/apiResources/LearnerGroupResource';
 import useUser from 'kolibri/composables/useUser';
 import { PageNames } from '../constants';
diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
index b7f9f4f8afa..d28586e2c0e 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -5,7 +5,7 @@ import { MAX_QUESTIONS_PER_QUIZ_SECTION } from 'kolibri/constants';
 import ExamResource from 'kolibri-common/apiResources/ExamResource';
 import { validateObject, objectWithDefaults } from 'kolibri/utils/objectSpecs';
 import { get, set } from '@vueuse/core';
-import { computed, ref, provide, inject, getCurrentInstance, watch } from '@vue/composition-api';
+import { computed, ref, provide, inject, getCurrentInstance, watch } from 'vue';
 import { fetchExamWithContent } from 'kolibri-common/quizzes/utils';
 // TODO: Probably move this to this file's local dir
 import selectQuestions, { getExerciseQuestionsMap } from '../utils/selectQuestions.js';
diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizResources.js b/kolibri/plugins/coach/assets/src/composables/useQuizResources.js
index 1e55a5bee4f..afeccb47a00 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizResources.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizResources.js
@@ -1,5 +1,5 @@
 import { get, set } from '@vueuse/core';
-import { computed, ref } from '@vue/composition-api';
+import { computed, ref } from 'vue';
 import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
 import { ContentNodeKinds } from 'kolibri/constants';
 import logging from 'kolibri-logging';
diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizzes.js b/kolibri/plugins/coach/assets/src/composables/useQuizzes.js
index 977d6f2b4d1..c6d3414eaa0 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizzes.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizzes.js
@@ -1,5 +1,5 @@
 import orderBy from 'lodash/orderBy';
-import { computed, getCurrentInstance } from '@vue/composition-api';
+import { computed, getCurrentInstance } from 'vue';
 
 export default function useQuizzes(store) {
   store = store || getCurrentInstance().proxy.$store;
diff --git a/kolibri/plugins/coach/assets/src/modules/lessonsRoot/index.js b/kolibri/plugins/coach/assets/src/modules/lessonsRoot/index.js
index 1f2adfe53c7..2bc03a644bc 100644
--- a/kolibri/plugins/coach/assets/src/modules/lessonsRoot/index.js
+++ b/kolibri/plugins/coach/assets/src/modules/lessonsRoot/index.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import { set } from 'vue';
 import * as actions from './actions';
 
 function defaultState() {
@@ -30,7 +30,7 @@ export default {
           for (const [key, val] of Object.entries(sizeItem)) {
             const lesson = state.lessons.find(lesson => lesson.id === key);
             if (lesson) {
-              Vue.set(lesson, 'size', val);
+              set(lesson, 'size', val);
             }
           }
         }
diff --git a/kolibri/plugins/coach/assets/src/views/groups/GroupsRootPage/index.vue b/kolibri/plugins/coach/assets/src/views/groups/GroupsRootPage/index.vue
index 86c7ea2070a..9fc1146a977 100644
--- a/kolibri/plugins/coach/assets/src/views/groups/GroupsRootPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/groups/GroupsRootPage/index.vue
@@ -91,7 +91,7 @@
 
 <script>
 
-  import { ref } from '@vue/composition-api';
+  import { ref } from 'vue';
   import { mapState, mapActions } from 'vuex';
   import orderBy from 'lodash/orderBy';
   import CoreTable from 'kolibri/components/CoreTable';
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue
index f562d89a7ce..f887d43b856 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue
@@ -88,7 +88,7 @@
 
 <script>
 
-  import { computed, toRefs } from '@vue/composition-api';
+  import { computed, toRefs } from 'vue';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import { ViewMoreButtonStates } from '../../../constants/index';
   import LessonContentCard from './LessonContentCard';
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
index 51151450bfe..40831b43074 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
@@ -89,7 +89,7 @@
   import { mapState, mapActions, mapMutations } from 'vuex';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import useSnackbar from 'kolibri/composables/useSnackbar';
-  import { computed, getCurrentInstance, watch } from '@vue/composition-api';
+  import { computed, getCurrentInstance, watch } from 'vue';
   import commonCoach from '../../common';
   import CoachAppBarPage from '../../CoachAppBarPage';
   import ReportsControls from '../../common/ReportsControls';
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
index d44feb30df4..ba5a5caa01b 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
@@ -114,7 +114,7 @@
 
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
-  import { ref } from '@vue/composition-api';
+  import { ref } from 'vue';
   import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
   import ChannelResource from 'kolibri-common/apiResources/ChannelResource';
   import AccessibleChannelCard from 'kolibri-common/components/Cards/AccessibleChannelCard.vue';
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonsRootPage.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonsRootPage.vue
index 4f0d4d09154..459dc54bedd 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonsRootPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonsRootPage.vue
@@ -182,7 +182,7 @@
 
 <script>
 
-  import Vue from 'vue';
+  import Vue, { set } from 'vue';
   import { mapState, mapActions } from 'vuex';
   import LessonResource from 'kolibri-common/apiResources/LessonResource';
   import countBy from 'lodash/countBy';
@@ -392,7 +392,7 @@
           : this.coachString('lessonNotVisibleToLearnersLabel');
         this.manageModalVisibilityAndPreferences();
 
-        Vue.set(this.updatingVisibilityLessons, lesson.id, lesson.id);
+        set(this.updatingVisibilityLessons, lesson.id, lesson.id);
         return LessonResource.saveModel({
           id: lesson.id,
           data: {
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/CreateQuizSection.vue
index e2112164d5b..52bab06409e 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/CreateQuizSection.vue
@@ -312,7 +312,7 @@
 
 <script>
 
-  import { ref } from '@vue/composition-api';
+  import { ref } from 'vue';
   import logging from 'kolibri-logging';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import {
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/QuestionListPreview.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/QuestionListPreview.vue
index 6ec3a753371..ca081c7e5f2 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/QuestionListPreview.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/QuestionListPreview.vue
@@ -147,7 +147,7 @@
 
 <script>
 
-  import { ref, computed, toRefs, watch } from '@vue/composition-api';
+  import { ref, computed, toRefs, watch } from 'vue';
   import commonCoreStrings, { coreStrings } from 'kolibri/uiText/commonCoreStrings';
   import useAccordion from 'kolibri-common/components/useAccordion';
   import AccordionItem from 'kolibri-common/components/AccordionItem';
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ReplaceQuestions.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ReplaceQuestions.vue
index 8bef1535797..307e8565229 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ReplaceQuestions.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ReplaceQuestions.vue
@@ -149,7 +149,7 @@
     enhancedQuizManagementStrings,
     displayQuestionTitle,
   } from 'kolibri-common/strings/enhancedQuizManagementStrings';
-  import { getCurrentInstance, computed, ref } from '@vue/composition-api';
+  import { getCurrentInstance, computed, ref } from 'vue';
   import { get } from '@vueuse/core';
   import isEqual from 'lodash/isEqual';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ResourceSelection.vue
index 3818e5d4f1e..adf0250787a 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ResourceSelection.vue
@@ -208,7 +208,7 @@
     displaySectionTitle,
     enhancedQuizManagementStrings,
   } from 'kolibri-common/strings/enhancedQuizManagementStrings';
-  import { computed, ref, getCurrentInstance, watch } from '@vue/composition-api';
+  import { computed, ref, getCurrentInstance, watch } from 'vue';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
   import ChannelResource from 'kolibri-common/apiResources/ChannelResource';
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionEditor.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionEditor.vue
index 7e493da2391..cd469dcfc25 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionEditor.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionEditor.vue
@@ -127,7 +127,7 @@
 
   import isEqual from 'lodash/isEqual';
   import pick from 'lodash/pick';
-  import { getCurrentInstance, computed, ref } from '@vue/composition-api';
+  import { getCurrentInstance, computed, ref } from 'vue';
   import {
     displaySectionTitle,
     enhancedQuizManagementStrings,
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue
index 91a82b526b2..bdf87cffa0c 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue
@@ -87,7 +87,7 @@
 <script>
 
   import isEqual from 'lodash/isEqual';
-  import { computed, ref } from '@vue/composition-api';
+  import { computed, ref } from 'vue';
   import {
     displaySectionTitle,
     enhancedQuizManagementStrings,
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionSidePanel.vue
index e2d86e26eb4..ad9d1cf8b91 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionSidePanel.vue
@@ -26,7 +26,7 @@
 <script>
 
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
-  import { ref, watch, computed, getCurrentInstance } from '@vue/composition-api';
+  import { ref, watch, computed, getCurrentInstance } from 'vue';
   import { PageNames } from '../../../constants';
 
   export default {
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue
index ec3e5bae556..c60b7065895 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue
@@ -115,7 +115,7 @@
   import get from 'lodash/get';
   import { ERROR_CONSTANTS } from 'kolibri/constants';
   import CatchErrors from 'kolibri/utils/CatchErrors';
-  import { ref } from '@vue/composition-api';
+  import { ref } from 'vue';
   import pickBy from 'lodash/pickBy';
   import BottomAppBar from 'kolibri/components/BottomAppBar';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/ExamsRootPage.vue b/kolibri/plugins/coach/assets/src/views/quizzes/ExamsRootPage.vue
index 600291bf64f..d31e49ce3d5 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/ExamsRootPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/ExamsRootPage.vue
@@ -212,7 +212,7 @@
 
 <script>
 
-  import { getCurrentInstance, ref } from '@vue/composition-api';
+  import { getCurrentInstance, ref } from 'vue';
   import CoreTable from 'kolibri/components/CoreTable';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import urls from 'kolibri/urls';
diff --git a/kolibri/plugins/coach/assets/test/useQuizCreation.spec.js b/kolibri/plugins/coach/assets/test/useQuizCreation.spec.js
index cbd4062bf69..5df30237c4a 100644
--- a/kolibri/plugins/coach/assets/test/useQuizCreation.spec.js
+++ b/kolibri/plugins/coach/assets/test/useQuizCreation.spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import { get } from '@vueuse/core';
 import ExamResource from 'kolibri-common/apiResources/ExamResource';
 import { objectWithDefaults } from 'kolibri/utils/objectSpecs';
@@ -157,7 +157,7 @@ describe('useQuizCreation', () => {
           resourcePool: [exercise],
           questionCount: 10,
         });
-        await Vue.nextTick();
+        await nextTick();
         expect(get(activeQuestions).length).toEqual(10);
 
         // Now let's change the question count and see if the questions array is updated
@@ -167,7 +167,7 @@ describe('useQuizCreation', () => {
           resourcePool: [exercise],
           questionCount: newQuestionCount,
         });
-        await Vue.nextTick();
+        await nextTick();
         // Now questions should only be as long as 10 + newQuestionCount
         expect(get(activeQuestions)).toHaveLength(10 + newQuestionCount);
 
@@ -179,7 +179,7 @@ describe('useQuizCreation', () => {
           resourcePool: [exercise],
           questionCount: newQuestionCount2,
         });
-        await Vue.nextTick();
+        await nextTick();
         expect(get(activeQuestions)).toHaveLength(20);
       });
 
diff --git a/kolibri/plugins/device/assets/src/composables/useContentTasks.js b/kolibri/plugins/device/assets/src/composables/useContentTasks.js
index 0ab0429d722..dfd0173cb32 100644
--- a/kolibri/plugins/device/assets/src/composables/useContentTasks.js
+++ b/kolibri/plugins/device/assets/src/composables/useContentTasks.js
@@ -1,5 +1,5 @@
 import { useIntervalFn } from '@vueuse/core';
-import { getCurrentInstance, onMounted, onUnmounted } from '@vue/composition-api';
+import { getCurrentInstance, onMounted, onUnmounted } from 'vue';
 import useUser from 'kolibri/composables/useUser';
 
 export default function useContentTasks() {
diff --git a/kolibri/plugins/device/assets/src/composables/useDeviceRestart.js b/kolibri/plugins/device/assets/src/composables/useDeviceRestart.js
index 66f2be4a9fa..9a91dd9bb38 100644
--- a/kolibri/plugins/device/assets/src/composables/useDeviceRestart.js
+++ b/kolibri/plugins/device/assets/src/composables/useDeviceRestart.js
@@ -2,7 +2,7 @@
  * A composable function containing logic related to restarting the device
  */
 
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import heartbeat from 'kolibri/heartbeat';
 import client from 'kolibri/client';
 import clientFactory from 'kolibri/utils/baseClient';
diff --git a/kolibri/plugins/device/assets/src/composables/usePlugins.js b/kolibri/plugins/device/assets/src/composables/usePlugins.js
index 08b1ecda8f7..d23e166a369 100644
--- a/kolibri/plugins/device/assets/src/composables/usePlugins.js
+++ b/kolibri/plugins/device/assets/src/composables/usePlugins.js
@@ -2,7 +2,7 @@
  * A composable function containing logic related to channels
  */
 
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import client from 'kolibri/client';
 import urls from 'kolibri/urls';
 
diff --git a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
index 99b76608b0f..d0912e9dda2 100644
--- a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
@@ -377,7 +377,7 @@
   import find from 'lodash/find';
   import urls from 'kolibri/urls';
   import logger from 'kolibri-logging';
-  import { ref, watch } from '@vue/composition-api';
+  import { ref, watch } from 'vue';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
   import { availableLanguages, currentLanguage, sortLanguages } from 'kolibri/utils/i18n';
diff --git a/kolibri/plugins/facility/assets/src/modules/importCSV/index.js b/kolibri/plugins/facility/assets/src/modules/importCSV/index.js
index 9b838ceb853..415232d1e98 100644
--- a/kolibri/plugins/facility/assets/src/modules/importCSV/index.js
+++ b/kolibri/plugins/facility/assets/src/modules/importCSV/index.js
@@ -1,5 +1,5 @@
 import TaskResource from 'kolibri/apiResources/TaskResource';
-import Vue from 'vue';
+import { set } from 'vue';
 import { CSVImportStatuses } from '../../constants';
 import actions from './actions';
 
@@ -70,8 +70,8 @@ export default {
       state.filename = payload;
     },
     UPDATE_TASK_REPORT(state, task) {
-      Vue.set(state, 'per_line_errors', task.extra_metdata.per_line_errors);
-      Vue.set(state, 'overall_error', task.extra_metdata.overall_error);
+      set(state, 'per_line_errors', task.extra_metdata.per_line_errors);
+      set(state, 'overall_error', task.extra_metdata.overall_error);
       state.filename = task.extra_metdata.filename;
       state.users_report = task.extra_metdata.users;
       state.classes_report = task.extra_metdata.classes;
@@ -81,8 +81,8 @@ export default {
       if (state.status == CSVImportStatuses.VALIDATING) state.status = CSVImportStatuses.VALIDATED;
       else if (state.status == CSVImportStatuses.SAVING) state.status = CSVImportStatuses.FINISHED;
 
-      Vue.set(state, 'per_line_errors', task.extra_metadata.per_line_errors);
-      Vue.set(state, 'overall_error', task.extra_metadata.overall_error);
+      set(state, 'per_line_errors', task.extra_metadata.per_line_errors);
+      set(state, 'overall_error', task.extra_metadata.overall_error);
       state.filename = task.extra_metadata.filename;
       state.users_report = task.extra_metadata.users;
       state.classes_report = task.extra_metadata.classes;
@@ -91,8 +91,8 @@ export default {
     },
     SET_FAILED(state, task) {
       state.status = CSVImportStatuses.ERRORS;
-      Vue.set(state, 'overall_error', task.extra_metadata.overall_error);
-      Vue.set(state, 'per_line_errors', []);
+      set(state, 'overall_error', task.extra_metadata.overall_error);
+      set(state, 'per_line_errors', []);
       TaskResource.clear(state.taskId);
       state.taskId = '';
     },
diff --git a/kolibri/plugins/facility/assets/src/modules/manageCSV/index.js b/kolibri/plugins/facility/assets/src/modules/manageCSV/index.js
index eee17a49870..49386c4913c 100644
--- a/kolibri/plugins/facility/assets/src/modules/manageCSV/index.js
+++ b/kolibri/plugins/facility/assets/src/modules/manageCSV/index.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import { set } from 'vue';
 import { CSVGenerationStatuses, UsersExportStatuses } from '../../constants';
 import actions from './actions';
 
@@ -95,7 +95,7 @@ export default {
     SET_REGISTERED(state, facility) {
       const match = state.facilities.find(f => f.id === facility.id);
       if (match) {
-        Vue.set(match.dataset, 'registered', true);
+        set(match.dataset, 'registered', true);
       }
     },
     /*State for export users tasks*/
diff --git a/kolibri/plugins/facility/assets/src/views/ManageClassPage/useDeleteClass.js b/kolibri/plugins/facility/assets/src/views/ManageClassPage/useDeleteClass.js
index 150dfc99bbb..393500e3caf 100644
--- a/kolibri/plugins/facility/assets/src/views/ManageClassPage/useDeleteClass.js
+++ b/kolibri/plugins/facility/assets/src/views/ManageClassPage/useDeleteClass.js
@@ -1,4 +1,4 @@
-import { ref, getCurrentInstance } from '@vue/composition-api';
+import { ref, getCurrentInstance } from 'vue';
 import { set } from '@vueuse/core';
 import ClassroomResource from 'kolibri-common/apiResources/ClassroomResource';
 
diff --git a/kolibri/plugins/learn/assets/src/composables/__mocks__/useDevices.js b/kolibri/plugins/learn/assets/src/composables/__mocks__/useDevices.js
index 66f643722d1..a76d3223ec7 100644
--- a/kolibri/plugins/learn/assets/src/composables/__mocks__/useDevices.js
+++ b/kolibri/plugins/learn/assets/src/composables/__mocks__/useDevices.js
@@ -31,7 +31,7 @@
  * ```
  */
 
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 
 const MOCK_DEFAULTS = {
   fetchDevices: jest.fn(() => Promise.resolve([])),
diff --git a/kolibri/plugins/learn/assets/src/composables/__tests__/useProgressTracking.spec.js b/kolibri/plugins/learn/assets/src/composables/__tests__/useProgressTracking.spec.js
index c8b9acc09aa..cc01b5028ff 100644
--- a/kolibri/plugins/learn/assets/src/composables/__tests__/useProgressTracking.spec.js
+++ b/kolibri/plugins/learn/assets/src/composables/__tests__/useProgressTracking.spec.js
@@ -4,7 +4,7 @@ import client from 'kolibri/client';
 import { coreStoreFactory as makeStore } from 'kolibri/store';
 import useUser, { useUserMock } from 'kolibri/composables/useUser'; // eslint-disable-line
 import useTotalProgress, { useTotalProgressMock } from 'kolibri/composables/useTotalProgress'; // eslint-disable-line
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import useProgressTracking from '../useProgressTracking';
 import coreModule from '../../../../../../core/assets/src/state/modules/core';
 
diff --git a/kolibri/plugins/learn/assets/src/composables/__tests__/useSearch.spec.js b/kolibri/plugins/learn/assets/src/composables/__tests__/useSearch.spec.js
index 4b5cb9c2cdc..3b0d5e1284e 100644
--- a/kolibri/plugins/learn/assets/src/composables/__tests__/useSearch.spec.js
+++ b/kolibri/plugins/learn/assets/src/composables/__tests__/useSearch.spec.js
@@ -1,7 +1,6 @@
 import { get, set } from '@vueuse/core';
 import VueRouter from 'vue-router';
-import Vue from 'vue';
-import { ref } from '@vue/composition-api';
+import Vue, { nextTick, ref } from 'vue';
 import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
 import { coreStoreFactory } from 'kolibri/store';
 import { AllCategories, NoCategories } from 'kolibri/constants';
@@ -199,7 +198,7 @@ describe(`useSearch`, () => {
       const { store } = prep();
       ContentNodeResource.fetchCollection.mockReturnValue(Promise.resolve({}));
       store.commit('SET_QUERY', { categories: 'test1,test2' });
-      await Vue.nextTick();
+      await nextTick();
       expect(ContentNodeResource.fetchCollection).toHaveBeenCalledWith({
         getParams: {
           categories: ['test1', 'test2'],
@@ -246,7 +245,7 @@ describe(`useSearch`, () => {
       ContentNodeResource.fetchCollection.mockReturnValue(Promise.resolve({ labels: labelsSet }));
       set(more, { test: 'test' });
       search();
-      await Vue.nextTick();
+      await nextTick();
       expect(get(more)).toBeNull();
       expect(get(labels)).toEqual(labelsSet);
     });
@@ -308,7 +307,7 @@ describe(`useSearch`, () => {
         }),
       );
       search();
-      await Vue.nextTick();
+      await nextTick();
       expect(get(labels)).toEqual(expectedLabels);
       expect(get(results)).toEqual(expectedResults);
       expect(get(more)).toEqual(expectedMore);
@@ -367,7 +366,7 @@ describe(`useSearch`, () => {
         }),
       );
       search();
-      await Vue.nextTick();
+      await nextTick();
       const expectedResults = [{ id: 'node-id1', content_id: 'second' }];
       ContentNodeResource.fetchCollection.mockReturnValue(
         Promise.resolve({
@@ -378,7 +377,7 @@ describe(`useSearch`, () => {
       );
       set(more, {});
       searchMore();
-      await Vue.nextTick();
+      await nextTick();
       expect(get(labels)).toEqual(expectedLabels);
       expect(get(results)).toEqual(originalResults.concat(expectedResults));
       expect(get(more)).toEqual(expectedMore);
diff --git a/kolibri/plugins/learn/assets/src/composables/useCardLayoutSpan.js b/kolibri/plugins/learn/assets/src/composables/useCardLayoutSpan.js
index d47cfca3673..560ba224976 100644
--- a/kolibri/plugins/learn/assets/src/composables/useCardLayoutSpan.js
+++ b/kolibri/plugins/learn/assets/src/composables/useCardLayoutSpan.js
@@ -1,6 +1,6 @@
 import { get } from '@vueuse/core';
 import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 
 export default function useCardLayoutSpan() {
   const { windowBreakpoint, windowIsSmall } = useKResponsiveWindow();
diff --git a/kolibri/plugins/learn/assets/src/composables/useCardViewStyle.js b/kolibri/plugins/learn/assets/src/composables/useCardViewStyle.js
index 17e275c0926..928eac867a9 100644
--- a/kolibri/plugins/learn/assets/src/composables/useCardViewStyle.js
+++ b/kolibri/plugins/learn/assets/src/composables/useCardViewStyle.js
@@ -1,5 +1,5 @@
 import { get } from '@vueuse/core';
-import { computed, getCurrentInstance } from '@vue/composition-api';
+import { computed, getCurrentInstance } from 'vue';
 
 const cardViewStyleQueryParam = 'cardViewStyle';
 
diff --git a/kolibri/plugins/learn/assets/src/composables/useContentLink.js b/kolibri/plugins/learn/assets/src/composables/useContentLink.js
index 4b4e14806b8..d5bce334591 100644
--- a/kolibri/plugins/learn/assets/src/composables/useContentLink.js
+++ b/kolibri/plugins/learn/assets/src/composables/useContentLink.js
@@ -1,7 +1,7 @@
 import { get } from '@vueuse/core';
 import isEmpty from 'lodash/isEmpty';
 import pick from 'lodash/pick';
-import { computed, getCurrentInstance } from '@vue/composition-api';
+import { computed, getCurrentInstance } from 'vue';
 import { ExternalPagePaths, PageNames } from '../constants';
 
 function _decodeBackLinkQuery(query) {
diff --git a/kolibri/plugins/learn/assets/src/composables/useContentNodeProgress.js b/kolibri/plugins/learn/assets/src/composables/useContentNodeProgress.js
index 33957feb6d6..8e3c9c939e1 100644
--- a/kolibri/plugins/learn/assets/src/composables/useContentNodeProgress.js
+++ b/kolibri/plugins/learn/assets/src/composables/useContentNodeProgress.js
@@ -4,7 +4,7 @@
  * All data exposed by this function belong to a current learner.
  */
 
-import { reactive } from '@vue/composition-api';
+import { reactive } from 'vue';
 import { set } from '@vueuse/core';
 
 import ContentNodeProgressResource from 'kolibri-common/apiResources/ContentNodeProgressResource';
diff --git a/kolibri/plugins/learn/assets/src/composables/useCoreLearn.js b/kolibri/plugins/learn/assets/src/composables/useCoreLearn.js
index 23be8eccfb5..56b2440abf7 100644
--- a/kolibri/plugins/learn/assets/src/composables/useCoreLearn.js
+++ b/kolibri/plugins/learn/assets/src/composables/useCoreLearn.js
@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { set } from '@vueuse/core';
 import client from 'kolibri/client';
 import urls from 'kolibri/urls';
diff --git a/kolibri/plugins/learn/assets/src/composables/useDeviceSettings.js b/kolibri/plugins/learn/assets/src/composables/useDeviceSettings.js
index 41e24df6815..36fff9ecc93 100644
--- a/kolibri/plugins/learn/assets/src/composables/useDeviceSettings.js
+++ b/kolibri/plugins/learn/assets/src/composables/useDeviceSettings.js
@@ -1,4 +1,4 @@
-import { computed, ref } from '@vue/composition-api';
+import { computed, ref } from 'vue';
 import store from 'kolibri/store';
 import plugin_data from 'kolibri-plugin-data';
 
diff --git a/kolibri/plugins/learn/assets/src/composables/useDevices.js b/kolibri/plugins/learn/assets/src/composables/useDevices.js
index 1e367b8885c..87eec3bfecb 100644
--- a/kolibri/plugins/learn/assets/src/composables/useDevices.js
+++ b/kolibri/plugins/learn/assets/src/composables/useDevices.js
@@ -2,7 +2,7 @@
  * A composable function containing logic related to channels
  */
 
-import { computed, getCurrentInstance, ref, onBeforeUnmount, watch } from '@vue/composition-api';
+import { computed, getCurrentInstance, ref, onBeforeUnmount, watch } from 'vue';
 import { NetworkLocationResource } from 'kolibri-common/apiResources/NetworkLocationResource';
 import RemoteChannelResource from 'kolibri-common/apiResources/RemoteChannelResource';
 import { get, set, useTimeoutPoll } from '@vueuse/core';
diff --git a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
index 09aa9a95396..00fc31b9313 100644
--- a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
+++ b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
@@ -2,14 +2,13 @@
  * A composable function containing logic related to download requests
  */
 
-import { getCurrentInstance, onBeforeUnmount, reactive, ref } from '@vue/composition-api';
+import Vue, { getCurrentInstance, onBeforeUnmount, reactive, ref } from 'vue';
 import ContentRequestResource from 'kolibri-common/apiResources/ContentRequestResource';
 import { createTranslator } from 'kolibri/utils/i18n';
 import { get, set } from '@vueuse/core';
 import redirectBrowser from 'kolibri/utils/redirectBrowser';
 import urls from 'kolibri/urls';
 import client from 'kolibri/client';
-import Vue from 'vue';
 import useUser from 'kolibri/composables/useUser';
 import useSnackbar from 'kolibri/composables/useSnackbar';
 import { currentDeviceData } from '../composables/useDevices';
diff --git a/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js b/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
index ad5315ac24c..9c9f0db14c4 100644
--- a/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
+++ b/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
@@ -5,7 +5,7 @@
  * All data exposed by this function belong to a current learner.
  */
 
-import { computed, ref } from '@vue/composition-api';
+import { computed, ref } from 'vue';
 import { get, set } from '@vueuse/core';
 import flatMap from 'lodash/flatMap';
 import flatMapDepth from 'lodash/flatMapDepth';
diff --git a/kolibri/plugins/learn/assets/src/composables/useLearningActivities.js b/kolibri/plugins/learn/assets/src/composables/useLearningActivities.js
index 75c0a9bfee9..8127c57bb2c 100644
--- a/kolibri/plugins/learn/assets/src/composables/useLearningActivities.js
+++ b/kolibri/plugins/learn/assets/src/composables/useLearningActivities.js
@@ -3,7 +3,7 @@
  * and their duration.
  */
 
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 import { get } from '@vueuse/core';
 import CompletionCriteria from 'kolibri-constants/CompletionCriteria';
 import lodashGet from 'lodash/get';
diff --git a/kolibri/plugins/learn/assets/src/composables/usePinnedDevices.js b/kolibri/plugins/learn/assets/src/composables/usePinnedDevices.js
index 5ac91aa4a7c..b48f106678d 100644
--- a/kolibri/plugins/learn/assets/src/composables/usePinnedDevices.js
+++ b/kolibri/plugins/learn/assets/src/composables/usePinnedDevices.js
@@ -3,7 +3,7 @@
  */
 
 import { get, set } from '@vueuse/core';
-import { computed, ref } from '@vue/composition-api';
+import { computed, ref } from 'vue';
 import PinnedDeviceResource from 'kolibri-common/apiResources/PinnedDeviceResource';
 import { crossComponentTranslator } from 'kolibri/utils/i18n';
 import useSnackbar from 'kolibri/composables/useSnackbar';
diff --git a/kolibri/plugins/learn/assets/src/composables/useProgressTracking.js b/kolibri/plugins/learn/assets/src/composables/useProgressTracking.js
index 37b9432e1ef..92092c1b1ee 100644
--- a/kolibri/plugins/learn/assets/src/composables/useProgressTracking.js
+++ b/kolibri/plugins/learn/assets/src/composables/useProgressTracking.js
@@ -4,7 +4,7 @@
  * All data exposed by this function belong to a current learner.
  */
 
-import { ref, reactive, getCurrentInstance, onBeforeUnmount } from '@vue/composition-api';
+import { ref, reactive, getCurrentInstance, onBeforeUnmount } from 'vue';
 import { get, set } from '@vueuse/core';
 import fromPairs from 'lodash/fromPairs';
 import isNumber from 'lodash/isNumber';
diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
index 26e349ef37d..15cc3a7b3ce 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
@@ -154,7 +154,7 @@
   import CoreTable from 'kolibri/components/CoreTable';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import PaginatedListContainerWithBackend from 'kolibri-common/components/PaginatedListContainerWithBackend';
-  import { computed, getCurrentInstance } from '@vue/composition-api';
+  import { computed, getCurrentInstance } from 'vue';
   import { get } from '@vueuse/core';
   import { createTranslator } from 'kolibri/utils/i18n';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
index e34978e276e..574bbd2c692 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
@@ -49,7 +49,7 @@
   import { get } from '@vueuse/core';
   import bytesForHumans from 'kolibri/uiText/bytesForHumans';
   import AppBarPage from 'kolibri/components/pages/AppBarPage';
-  import { computed, getCurrentInstance } from '@vue/composition-api';
+  import { computed, getCurrentInstance } from 'vue';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import plugin_data from 'kolibri-plugin-data';
   import useDownloadRequests from '../../composables/useDownloadRequests';
diff --git a/kolibri/plugins/learn/assets/src/views/ContentPage.vue b/kolibri/plugins/learn/assets/src/views/ContentPage.vue
index d25296a3c70..3ca2c9a5d94 100644
--- a/kolibri/plugins/learn/assets/src/views/ContentPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/ContentPage.vue
@@ -104,7 +104,7 @@
 
   import get from 'lodash/get';
   import { mapState } from 'vuex';
-  import { ref } from '@vue/composition-api';
+  import { ref } from 'vue';
   import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import router from 'kolibri/router';
diff --git a/kolibri/plugins/learn/assets/src/views/DeviceConnectionStatus.vue b/kolibri/plugins/learn/assets/src/views/DeviceConnectionStatus.vue
index 07214bb29b5..41c21e58be1 100644
--- a/kolibri/plugins/learn/assets/src/views/DeviceConnectionStatus.vue
+++ b/kolibri/plugins/learn/assets/src/views/DeviceConnectionStatus.vue
@@ -25,7 +25,7 @@
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import useDevices from 'kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/useDevices';
   import RemoteChannelResource from 'kolibri-common/apiResources/RemoteChannelResource';
-  import { ref, onBeforeUnmount } from '@vue/composition-api';
+  import { ref, onBeforeUnmount } from 'vue';
   import { KolibriStudioId } from '../constants';
   import commonLearnStrings from './commonLearnStrings';
 
diff --git a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
index 001de637a09..321ed3bd224 100644
--- a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
@@ -76,7 +76,7 @@
 <script>
 
   import { get, set } from '@vueuse/core';
-  import { ref, watch } from '@vue/composition-api';
+  import { ref, watch } from 'vue';
   import ImmersivePage from 'kolibri/components/pages/ImmersivePage';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import commonLearnStrings from '../commonLearnStrings';
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/ContinueLearning.vue b/kolibri/plugins/learn/assets/src/views/HomePage/ContinueLearning.vue
index ab8305a389e..6dfc1be9307 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/ContinueLearning.vue
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/ContinueLearning.vue
@@ -59,7 +59,7 @@
 
   import last from 'lodash/last';
   import uniqBy from 'lodash/uniqBy';
-  import { computed } from '@vue/composition-api';
+  import { computed } from 'vue';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import { get } from '@vueuse/core';
   import CardGrid from '../cards/CardGrid';
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js b/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js
index e5390417a8a..f1552548e5f 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js
@@ -6,7 +6,7 @@ import { useDevicesWithFilter } from 'kolibri-common/components/syncComponentSet
 import useUser, { useUserMock } from 'kolibri/composables/useUser'; // eslint-disable-line
 import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
 import useTotalProgress, { useTotalProgressMock } from 'kolibri/composables/useTotalProgress'; // eslint-disable-line
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 // eslint-disable-next-line import/named
 import useChannels, { useChannelsMock } from 'kolibri-common/composables/useChannels';
 import { ClassesPageNames, PageNames } from '../../../constants';
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
index b5c4a8eb986..ae1e5fcc961 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
@@ -62,7 +62,7 @@
 
 <script>
 
-  import { computed, getCurrentInstance } from '@vue/composition-api';
+  import { computed, getCurrentInstance } from 'vue';
   import { get, set } from '@vueuse/core';
   import client from 'kolibri/client';
   import urls from 'kolibri/urls';
diff --git a/kolibri/plugins/learn/assets/src/views/LearningActivityLabel/index.vue b/kolibri/plugins/learn/assets/src/views/LearningActivityLabel/index.vue
index a000fddc6bb..9c7d3958424 100644
--- a/kolibri/plugins/learn/assets/src/views/LearningActivityLabel/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LearningActivityLabel/index.vue
@@ -34,7 +34,7 @@
 
 <script>
 
-  import { computed } from '@vue/composition-api';
+  import { computed } from 'vue';
   import { get } from '@vueuse/core';
   import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
   import useLearningActivities from '../../composables/useLearningActivities';
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
index a7021bf2465..5c562229a5f 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
@@ -140,7 +140,7 @@
 <script>
 
   import { get } from '@vueuse/core';
-  import { computed } from '@vue/composition-api';
+  import { computed } from 'vue';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
   import useCardLayoutSpan from '../../composables/useCardLayoutSpan';
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/ResumableContentGrid.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/ResumableContentGrid.vue
index da1775fbf7d..245adec5a00 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/ResumableContentGrid.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/ResumableContentGrid.vue
@@ -70,7 +70,7 @@
 
 <script>
 
-  import { ref } from '@vue/composition-api';
+  import { ref } from 'vue';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import useLearnerResources from '../../composables/useLearnerResources';
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index 21285238637..8ca0fc94e1c 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -177,7 +177,7 @@
 
   import { get, set } from '@vueuse/core';
 
-  import { onMounted, getCurrentInstance, ref, watch } from '@vue/composition-api';
+  import { onMounted, getCurrentInstance, ref, watch } from 'vue';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import useUser from 'kolibri/composables/useUser';
diff --git a/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue b/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
index 80bed082353..00bab9c7b9a 100644
--- a/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
+++ b/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
@@ -15,7 +15,7 @@
 <script>
 
   import { get } from '@vueuse/core';
-  import { computed, watch } from '@vue/composition-api';
+  import { computed, watch } from 'vue';
   import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert.vue';
   import useUserSyncStatus from 'kolibri-common/composables/useUserSyncStatus';
   import { SyncStatus } from 'kolibri/constants';
diff --git a/kolibri/plugins/learn/assets/src/views/SearchResultsGrid.vue b/kolibri/plugins/learn/assets/src/views/SearchResultsGrid.vue
index 64774347f50..749a68b4db7 100644
--- a/kolibri/plugins/learn/assets/src/views/SearchResultsGrid.vue
+++ b/kolibri/plugins/learn/assets/src/views/SearchResultsGrid.vue
@@ -73,7 +73,7 @@
 
 <script>
 
-  import { ref } from '@vue/composition-api';
+  import { ref } from 'vue';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import SearchChips from 'kolibri-common/components/SearchChips';
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue b/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
index 82a28129e6f..19c37cc0f03 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
@@ -156,7 +156,7 @@
   import { mapState } from 'vuex';
   import { get, set } from '@vueuse/core';
   import lodashGet from 'lodash/get';
-  import { getCurrentInstance, ref, watch } from '@vue/composition-api';
+  import { getCurrentInstance, ref, watch } from 'vue';
   import Modalities from 'kolibri-constants/Modalities';
 
   import AuthMessage from 'kolibri/components/AuthMessage';
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
index 1efdf58c1fd..957d117e0f1 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
@@ -259,7 +259,7 @@
   import lodashSet from 'lodash/set';
   import lodashGet from 'lodash/get';
   import KBreadcrumbs from 'kolibri-design-system/lib/KBreadcrumbs';
-  import { getCurrentInstance, ref, watch } from '@vue/composition-api';
+  import { getCurrentInstance, ref, watch } from 'vue';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import useUser from 'kolibri/composables/useUser';
   import { ContentNodeKinds } from 'kolibri/constants';
diff --git a/kolibri/plugins/learn/assets/src/views/classes/AssignedQuizzesCards.vue b/kolibri/plugins/learn/assets/src/views/classes/AssignedQuizzesCards.vue
index d31293c9929..a4429448b46 100644
--- a/kolibri/plugins/learn/assets/src/views/classes/AssignedQuizzesCards.vue
+++ b/kolibri/plugins/learn/assets/src/views/classes/AssignedQuizzesCards.vue
@@ -30,7 +30,7 @@
 
 <script>
 
-  import { computed } from '@vue/composition-api';
+  import { computed } from 'vue';
   import useLearnerResources from '../../composables/useLearnerResources';
   import QuizCard from '../cards/QuizCard';
   import CardGrid from '../cards/CardGrid';
diff --git a/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue b/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue
index f87dce81122..4b5ffb27c8a 100644
--- a/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue
@@ -30,7 +30,7 @@
 
 <script>
 
-  import { computed, onBeforeMount, onBeforeUnmount } from '@vue/composition-api';
+  import { computed, onBeforeMount, onBeforeUnmount } from 'vue';
   import { get } from '@vueuse/core';
   import KBreadcrumbs from 'kolibri-design-system/lib/KBreadcrumbs';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
diff --git a/kolibri/plugins/learn/assets/test/views/topics-page.spec.js b/kolibri/plugins/learn/assets/test/views/topics-page.spec.js
index 4750b8eaeaa..0b58903d0ba 100644
--- a/kolibri/plugins/learn/assets/test/views/topics-page.spec.js
+++ b/kolibri/plugins/learn/assets/test/views/topics-page.spec.js
@@ -6,6 +6,7 @@ import KBreadcrumbs from 'kolibri-design-system/lib/KBreadcrumbs';
 import { ContentNodeKinds } from 'kolibri/constants';
 import { useDevicesWithFilter } from 'kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/useDevices';
 import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
+import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
 import plugin_data from 'kolibri-plugin-data';
 // eslint-disable-next-line import/named
 import useBaseSearch, { useBaseSearchMock } from 'kolibri-common/composables/useBaseSearch';
@@ -91,6 +92,7 @@ jest.mock('kolibri/composables/useUser');
 jest.mock('kolibri-common/composables/useBaseSearch');
 jest.mock('../../src/composables/useContentLink');
 jest.mock('kolibri-common/composables/useChannels');
+jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow');
 // Needed to test anything using mount() where children use this composable
 jest.mock('../../src/composables/useLearningActivities');
 
@@ -156,6 +158,11 @@ describe('TopicsPage', () => {
 
       useBaseSearch.mockImplementation(() => useBaseSearchMock());
 
+      useKResponsiveWindow.mockImplementation(() => ({
+        windowIsSmall: false,
+        windowIsLarge: true,
+      }));
+
       ContentNodeResource.fetchTree.mockResolvedValue({
         ...DEFAULT_TOPIC,
         options: { modality: 'CUSTOM_NAVIGATION' },
@@ -173,11 +180,14 @@ describe('TopicsPage', () => {
 
   describe('Displaying the header', () => {
     it('displays breadcrumbs when not on a small screen', async () => {
+      useKResponsiveWindow.mockImplementation(() => ({
+        windowIsSmall: false,
+        windowIsLarge: true,
+      }));
       const wrapper = shallowMount(TopicsPage, {
         store: store,
         localVue,
         router,
-        computed: { windowIsSmall: () => false },
       });
       await flushPromises();
       expect(wrapper.find("[data-test='header-breadcrumbs']").exists()).toBe(true);
@@ -185,22 +195,28 @@ describe('TopicsPage', () => {
   });
 
   it('displays the header with tabs when not on a small screen', async () => {
+    useKResponsiveWindow.mockImplementation(() => ({
+      windowIsSmall: false,
+      windowIsLarge: true,
+    }));
     const wrapper = shallowMount(TopicsPage, {
       store: store,
       localVue,
       router,
-      computed: { windowIsSmall: () => false },
     });
     await flushPromises();
     expect(wrapper.findComponent({ name: 'TopicsHeader' }).exists()).toBe(true);
   });
 
   it('displays the topic title when page is not small', async () => {
+    useKResponsiveWindow.mockImplementation(() => ({
+      windowIsSmall: false,
+      windowIsLarge: true,
+    }));
     const wrapper = mount(TopicsPage, {
       store: store,
       localVue,
       router,
-      computed: { windowIsSmall: () => false },
     });
     await flushPromises();
     expect(wrapper.find("[data-test='header-title']").element).toHaveTextContent(
@@ -209,11 +225,14 @@ describe('TopicsPage', () => {
   });
 
   it('displays the topic title when page is small', async () => {
+    useKResponsiveWindow.mockImplementation(() => ({
+      windowIsSmall: true,
+      windowIsLarge: false,
+    }));
     const smallScreenWrapper = mount(TopicsPage, {
       store: store,
       localVue,
       router,
-      computed: { windowIsSmall: () => true },
     });
     await flushPromises();
     expect(smallScreenWrapper.find("[data-test='mobile-title']").element).toHaveTextContent(
@@ -224,13 +243,15 @@ describe('TopicsPage', () => {
   describe('showing cards', () => {
     let wrapper;
     beforeEach(async () => {
+      useKResponsiveWindow.mockImplementation(() => ({
+        windowIsSmall: true,
+        windowIsLarge: false,
+      }));
       wrapper = shallowMount(TopicsPage, {
         store: store,
         localVue,
         router,
         computed: {
-          windowIsLarge: () => false,
-          windowIsSmall: () => true,
           breadcrumbs: () => [{}],
         },
       });
@@ -287,15 +308,15 @@ describe('TopicsPage', () => {
           }),
         );
 
+        useKResponsiveWindow.mockImplementation(() => ({
+          windowIsSmall: true,
+          windowIsLarge: false,
+        }));
+
         wrapper = mount(TopicsPage, {
           store: store,
           localVue,
           router,
-
-          computed: {
-            windowIsLarge: () => false,
-            windowIsSmall: () => true,
-          },
         });
         await flushPromises();
       });
@@ -320,13 +341,15 @@ describe('TopicsPage', () => {
             searchError: null,
           }),
         );
+        useKResponsiveWindow.mockImplementation(() => ({
+          windowIsSmall: true,
+          windowIsLarge: false,
+        }));
         wrapper = mount(TopicsPage, {
           store: store,
           localVue,
           router,
           computed: {
-            windowIsLarge: () => false,
-            windowIsSmall: () => true,
             contentsForDisplay: () => {
               return [
                 {
diff --git a/kolibri/plugins/user_profile/assets/src/composables/useCurrentUser.js b/kolibri/plugins/user_profile/assets/src/composables/useCurrentUser.js
index d4a9d5f5718..d3e77b517dc 100644
--- a/kolibri/plugins/user_profile/assets/src/composables/useCurrentUser.js
+++ b/kolibri/plugins/user_profile/assets/src/composables/useCurrentUser.js
@@ -1,4 +1,4 @@
-import { ref, onMounted } from '@vue/composition-api';
+import { ref, onMounted } from 'vue';
 import FacilityUserResource from 'kolibri-common/apiResources/FacilityUserResource';
 import useUser from 'kolibri/composables/useUser';
 import { get } from '@vueuse/core';
diff --git a/kolibri/plugins/user_profile/assets/src/composables/useOnMyOwnSetup.js b/kolibri/plugins/user_profile/assets/src/composables/useOnMyOwnSetup.js
index 968176d2b18..bfa3962d231 100644
--- a/kolibri/plugins/user_profile/assets/src/composables/useOnMyOwnSetup.js
+++ b/kolibri/plugins/user_profile/assets/src/composables/useOnMyOwnSetup.js
@@ -1,5 +1,5 @@
 import { get } from '@vueuse/core';
-import { ref, onMounted } from '@vue/composition-api';
+import { ref, onMounted } from 'vue';
 import useUser from 'kolibri/composables/useUser';
 import client from 'kolibri/client';
 import urls from 'kolibri/urls';
diff --git a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/ChooseAdmin/index.vue b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/ChooseAdmin/index.vue
index dd89121e4b2..4a7742afa09 100644
--- a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/ChooseAdmin/index.vue
+++ b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/ChooseAdmin/index.vue
@@ -47,7 +47,7 @@
 <script>
 
   import get from 'lodash/get';
-  import { inject, computed, ref } from '@vue/composition-api';
+  import { inject, computed, ref } from 'vue';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import BottomAppBar from 'kolibri/components/BottomAppBar';
   import PaginatedListContainer from 'kolibri-common/components/PaginatedListContainer';
diff --git a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/ConfirmMerge.vue b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/ConfirmMerge.vue
index 55b986df0d9..dad8dea2cc4 100644
--- a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/ConfirmMerge.vue
+++ b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/ConfirmMerge.vue
@@ -42,7 +42,7 @@
 
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import BottomAppBar from 'kolibri/components/BottomAppBar';
-  import { inject, ref } from '@vue/composition-api';
+  import { inject, ref } from 'vue';
   import commonProfileStrings from '../commonProfileStrings';
 
   export default {
diff --git a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeAccountDialog/ConfirmAccountDetails.vue b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeAccountDialog/ConfirmAccountDetails.vue
index 9b540a6f8dc..132c0b7034d 100644
--- a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeAccountDialog/ConfirmAccountDetails.vue
+++ b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeAccountDialog/ConfirmAccountDetails.vue
@@ -89,7 +89,7 @@
   import BottomAppBar from 'kolibri/components/BottomAppBar';
   import GenderDisplayText from 'kolibri-common/components/userAccounts/GenderDisplayText';
   import BirthYearDisplayText from 'kolibri-common/components/userAccounts/BirthYearDisplayText';
-  import { computed, inject } from '@vue/composition-api';
+  import { computed, inject } from 'vue';
   import get from 'lodash/get';
 
   export default {
diff --git a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeAccountDialog/index.vue b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeAccountDialog/index.vue
index 3107c5b12d6..42b893989fe 100644
--- a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeAccountDialog/index.vue
+++ b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeAccountDialog/index.vue
@@ -78,7 +78,7 @@
 
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import BottomAppBar from 'kolibri/components/BottomAppBar';
-  import { computed, inject, ref, watch } from '@vue/composition-api';
+  import { computed, inject, ref, watch } from 'vue';
   import get from 'lodash/get';
   import remoteFacilityUserData from '../../../composables/useRemoteFacility';
   import commonProfileStrings from '../../commonProfileStrings';
diff --git a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeDifferentAccounts/index.vue b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeDifferentAccounts/index.vue
index 1ca1c8c319c..ef7742f680d 100644
--- a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeDifferentAccounts/index.vue
+++ b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeDifferentAccounts/index.vue
@@ -58,7 +58,7 @@
 
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import BottomAppBar from 'kolibri/components/BottomAppBar';
-  import { computed, inject, ref } from '@vue/composition-api';
+  import { computed, inject, ref } from 'vue';
   import get from 'lodash/get';
   import { remoteFacilityUsers } from '../../../composables/useRemoteFacility';
   import commonProfileStrings from '../../commonProfileStrings';
diff --git a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeFacility.vue b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeFacility.vue
index 1e018a9fb29..fe8a4b459f0 100644
--- a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeFacility.vue
+++ b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeFacility.vue
@@ -93,7 +93,7 @@
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import BottomAppBar from 'kolibri/components/BottomAppBar';
-  import { computed, inject, onMounted, ref } from '@vue/composition-api';
+  import { computed, inject, onMounted, ref } from 'vue';
   import TaskResource from 'kolibri/apiResources/TaskResource';
   import get from 'lodash/get';
   import { syncStatusToDescriptionMap, TaskStatuses } from 'kolibri-common/utils/syncTaskUtils';
diff --git a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/SelectFacility.vue b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/SelectFacility.vue
index 94f402e4988..da19ff5d35a 100644
--- a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/SelectFacility.vue
+++ b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/SelectFacility.vue
@@ -76,7 +76,7 @@
 <script>
 
   import { useLocalStorage, useMemoize, computedAsync, get } from '@vueuse/core';
-  import { computed, ref, watch } from '@vue/composition-api';
+  import { computed, ref, watch } from 'vue';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import commonSyncElements from 'kolibri-common/mixins/commonSyncElements';
   import { NetworkLocationResource } from 'kolibri-common/apiResources/NetworkLocationResource';
diff --git a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/UsernameExists.vue b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/UsernameExists.vue
index 68e4b343db8..50971e79816 100644
--- a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/UsernameExists.vue
+++ b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/UsernameExists.vue
@@ -37,7 +37,7 @@
 
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import BottomAppBar from 'kolibri/components/BottomAppBar';
-  import { computed, inject } from '@vue/composition-api';
+  import { computed, inject } from 'vue';
   import get from 'lodash/get';
   import commonProfileStrings from '../commonProfileStrings';
 
diff --git a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/index.vue b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/index.vue
index eb4277cdb48..940db081c30 100644
--- a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/index.vue
+++ b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/index.vue
@@ -20,7 +20,7 @@
   import NotificationsRoot from 'kolibri/components/pages/NotificationsRoot';
   import ImmersivePage from 'kolibri/components/pages/ImmersivePage';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
-  import { computed } from '@vue/composition-api';
+  import { computed } from 'vue';
   import { interpret } from 'xstate';
   import useUser from 'kolibri/composables/useUser';
   import { changeFacilityMachine } from '../../machines/changeFacilityMachine';
diff --git a/kolibri/plugins/user_profile/assets/src/views/ProfilePage/index.vue b/kolibri/plugins/user_profile/assets/src/views/ProfilePage/index.vue
index bae646d5bab..0bab7d44786 100644
--- a/kolibri/plugins/user_profile/assets/src/views/ProfilePage/index.vue
+++ b/kolibri/plugins/user_profile/assets/src/views/ProfilePage/index.vue
@@ -187,7 +187,7 @@
   import NotificationsRoot from 'kolibri/components/pages/NotificationsRoot';
   import AppBarPage from 'kolibri/components/pages/AppBarPage';
   import { mapGetters } from 'vuex';
-  import { ref } from '@vue/composition-api';
+  import { ref } from 'vue';
   import find from 'lodash/find';
   import pickBy from 'lodash/pickBy';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
index eb6cf41bd24..b29baec7b96 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/index.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
@@ -178,7 +178,7 @@
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
-  import { ref } from '@vue/composition-api';
+  import { ref } from 'vue';
   import { injectBaseSearch } from 'kolibri-common/composables/useBaseSearch';
   import SearchBox from '../SearchBox';
   import ActivityButtonsGroup from './ActivityButtonsGroup';
diff --git a/packages/kolibri-common/components/SyncSchedule/ManageSyncSchedule.vue b/packages/kolibri-common/components/SyncSchedule/ManageSyncSchedule.vue
index 4b3f04e0fe6..010f0aef576 100644
--- a/packages/kolibri-common/components/SyncSchedule/ManageSyncSchedule.vue
+++ b/packages/kolibri-common/components/SyncSchedule/ManageSyncSchedule.vue
@@ -114,7 +114,7 @@
 
 <script>
 
-  import { computed } from '@vue/composition-api';
+  import { computed } from 'vue';
   import ImmersivePage from 'kolibri/components/pages/ImmersivePage';
   import CoreTable from 'kolibri/components/CoreTable';
   import TaskResource from 'kolibri/apiResources/TaskResource';
diff --git a/packages/kolibri-common/components/accordion/AccordionContainer.vue b/packages/kolibri-common/components/accordion/AccordionContainer.vue
index 69e73ed2dd5..c1e7af43125 100644
--- a/packages/kolibri-common/components/accordion/AccordionContainer.vue
+++ b/packages/kolibri-common/components/accordion/AccordionContainer.vue
@@ -31,7 +31,7 @@
 
 <script>
 
-  import { computed } from '@vue/composition-api';
+  import { computed } from 'vue';
   import useAccordion from './useAccordion';
 
   export default {
diff --git a/packages/kolibri-common/components/accordion/useAccordion.js b/packages/kolibri-common/components/accordion/useAccordion.js
index d9ba577ac1a..772ccd84923 100644
--- a/packages/kolibri-common/components/accordion/useAccordion.js
+++ b/packages/kolibri-common/components/accordion/useAccordion.js
@@ -1,5 +1,5 @@
 import uniq from 'lodash/uniq';
-import { ref, computed, provide, inject } from '@vue/composition-api';
+import { ref, computed, provide, inject } from 'vue';
 
 export default function useAccordion() {
   const _items = ref([]);
diff --git a/packages/kolibri-common/components/quizzes/QuizReport/AttemptLogList.vue b/packages/kolibri-common/components/quizzes/QuizReport/AttemptLogList.vue
index 73774fda0bd..8d74f0aa347 100644
--- a/packages/kolibri-common/components/quizzes/QuizReport/AttemptLogList.vue
+++ b/packages/kolibri-common/components/quizzes/QuizReport/AttemptLogList.vue
@@ -161,7 +161,7 @@
   import useAccordion from 'kolibri-common/components/useAccordion';
   import AccordionItem from 'kolibri-common/components/AccordionItem';
   import AccordionContainer from 'kolibri-common/components/AccordionContainer';
-  import { computed, onMounted, watch } from '@vue/composition-api';
+  import { computed, onMounted, watch } from 'vue';
   import { toRefs } from '@vueuse/core';
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
   import AttemptLogItem from './AttemptLogItem';
diff --git a/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/SelectDeviceForm.vue b/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/SelectDeviceForm.vue
index e6f7ebdb750..cd510c8a36a 100644
--- a/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/SelectDeviceForm.vue
+++ b/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/SelectDeviceForm.vue
@@ -137,7 +137,7 @@
 
 <script>
 
-  import { computed } from '@vue/composition-api';
+  import { computed } from 'vue';
   import { useLocalStorage, get } from '@vueuse/core';
   import find from 'lodash/find';
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
diff --git a/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/useConnectionChecker.js b/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/useConnectionChecker.js
index 2589f0af97d..3e82c6c92f7 100644
--- a/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/useConnectionChecker.js
+++ b/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/useConnectionChecker.js
@@ -1,4 +1,4 @@
-import { ref, onBeforeUnmount } from '@vue/composition-api';
+import { ref, onBeforeUnmount } from 'vue';
 import { get, set, useMemoize, useTimeoutPoll } from '@vueuse/core';
 import { updateConnectionStatus } from './api';
 import { ConnectionStatus } from './constants';
diff --git a/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/useDeviceDeletion.js b/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/useDeviceDeletion.js
index e22d1874aea..3e6b9e4e9ab 100644
--- a/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/useDeviceDeletion.js
+++ b/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/useDeviceDeletion.js
@@ -1,4 +1,4 @@
-import { ref, computed } from '@vue/composition-api';
+import { ref, computed } from 'vue';
 import { set, get } from '@vueuse/core';
 import { deleteDevice } from './api';
 
diff --git a/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/useDevices.js b/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/useDevices.js
index fb51f3e3438..6d1e35fa325 100644
--- a/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/useDevices.js
+++ b/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/useDevices.js
@@ -1,7 +1,7 @@
 import logger from 'kolibri-logging';
 import _get from 'lodash/get';
 import isArray from 'lodash/isArray';
-import { ref, reactive, computed, onBeforeUnmount, watch } from '@vue/composition-api';
+import { ref, reactive, computed, onBeforeUnmount, watch } from 'vue';
 import { get, set, useMemoize, useTimeoutPoll } from '@vueuse/core';
 
 import useMinimumKolibriVersion from 'kolibri/composables/useMinimumKolibriVersion';
diff --git a/packages/kolibri-common/components/useAccordion.js b/packages/kolibri-common/components/useAccordion.js
index 0bfa0586020..db4696566ac 100644
--- a/packages/kolibri-common/components/useAccordion.js
+++ b/packages/kolibri-common/components/useAccordion.js
@@ -1,5 +1,5 @@
 import uniq from 'lodash/uniq';
-import { isRef, ref, computed } from '@vue/composition-api';
+import { isRef, ref, computed } from 'vue';
 
 /**
  * @param {Object} options
diff --git a/packages/kolibri-common/composables/__tests__/useBaseSearch.spec.js b/packages/kolibri-common/composables/__tests__/useBaseSearch.spec.js
index f25810864ec..b4b46c14a82 100644
--- a/packages/kolibri-common/composables/__tests__/useBaseSearch.spec.js
+++ b/packages/kolibri-common/composables/__tests__/useBaseSearch.spec.js
@@ -1,7 +1,6 @@
 import { get, set } from '@vueuse/core';
 import VueRouter from 'vue-router';
-import Vue from 'vue';
-import { ref } from '@vue/composition-api';
+import Vue, { nextTick, ref } from 'vue';
 import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
 import { coreStoreFactory } from 'kolibri/store';
 import { AllCategories, NoCategories } from 'kolibri/constants';
@@ -199,7 +198,7 @@ describe(`useBaseSearch`, () => {
       const { store } = prep();
       ContentNodeResource.fetchCollection.mockReturnValue(Promise.resolve({}));
       store.commit('SET_QUERY', { categories: 'test1,test2' });
-      await Vue.nextTick();
+      await nextTick();
       expect(ContentNodeResource.fetchCollection).toHaveBeenCalledWith({
         getParams: {
           categories: ['test1', 'test2'],
@@ -246,7 +245,7 @@ describe(`useBaseSearch`, () => {
       ContentNodeResource.fetchCollection.mockReturnValue(Promise.resolve({ labels: labelsSet }));
       set(more, { test: 'test' });
       search();
-      await Vue.nextTick();
+      await nextTick();
       expect(get(more)).toBeNull();
       expect(get(labels)).toEqual(labelsSet);
     });
@@ -308,7 +307,7 @@ describe(`useBaseSearch`, () => {
         }),
       );
       search();
-      await Vue.nextTick();
+      await nextTick();
       expect(get(labels)).toEqual(expectedLabels);
       expect(get(results)).toEqual(expectedResults);
       expect(get(more)).toEqual(expectedMore);
@@ -367,7 +366,7 @@ describe(`useBaseSearch`, () => {
         }),
       );
       search();
-      await Vue.nextTick();
+      await nextTick();
       const expectedResults = [{ id: 'node-id1', content_id: 'second' }];
       ContentNodeResource.fetchCollection.mockReturnValue(
         Promise.resolve({
@@ -378,7 +377,7 @@ describe(`useBaseSearch`, () => {
       );
       set(more, {});
       searchMore();
-      await Vue.nextTick();
+      await nextTick();
       expect(get(labels)).toEqual(expectedLabels);
       expect(get(results)).toEqual(originalResults.concat(expectedResults));
       expect(get(more)).toEqual(expectedMore);
diff --git a/packages/kolibri-common/composables/useBaseSearch.js b/packages/kolibri-common/composables/useBaseSearch.js
index 39a20d9e413..dcee9eb8a25 100644
--- a/packages/kolibri-common/composables/useBaseSearch.js
+++ b/packages/kolibri-common/composables/useBaseSearch.js
@@ -1,7 +1,7 @@
 import { get, set } from '@vueuse/core';
 import invert from 'lodash/invert';
 import logger from 'kolibri-logging';
-import { computed, getCurrentInstance, inject, provide, ref, watch } from '@vue/composition-api';
+import { computed, getCurrentInstance, inject, provide, ref, watch } from 'vue';
 import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
 import {
   AllCategories,
diff --git a/packages/kolibri-common/composables/useChannels.js b/packages/kolibri-common/composables/useChannels.js
index 11890adb537..55b6199824c 100644
--- a/packages/kolibri-common/composables/useChannels.js
+++ b/packages/kolibri-common/composables/useChannels.js
@@ -2,7 +2,7 @@
  * A composable function containing logic related to channels
  */
 import pickBy from 'lodash/pickBy';
-import { ref, reactive } from '@vue/composition-api';
+import { ref, reactive } from 'vue';
 import ChannelResource from 'kolibri-common/apiResources/ChannelResource';
 import { get, set } from '@vueuse/core';
 
diff --git a/packages/kolibri-common/composables/useCoachMetadataTags.js b/packages/kolibri-common/composables/useCoachMetadataTags.js
index e797ca9a1e8..76898c989b0 100644
--- a/packages/kolibri-common/composables/useCoachMetadataTags.js
+++ b/packages/kolibri-common/composables/useCoachMetadataTags.js
@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { ContentNodeKinds } from 'kolibri/constants';
 import { coreString, coreStrings } from 'kolibri/uiText/commonCoreStrings';
 
diff --git a/packages/kolibri-common/composables/useUserSyncStatus.js b/packages/kolibri-common/composables/useUserSyncStatus.js
index 91f24b5c93d..3869c21f2c9 100644
--- a/packages/kolibri-common/composables/useUserSyncStatus.js
+++ b/packages/kolibri-common/composables/useUserSyncStatus.js
@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted, computed } from '@vue/composition-api';
+import { ref, onMounted, onUnmounted, computed } from 'vue';
 import UserSyncStatusResource from 'kolibri-common/apiResources/UserSyncStatusResource';
 import store from 'kolibri/store';
 import { SyncStatus } from 'kolibri/constants';
diff --git a/packages/kolibri-tools/jest.conf/setup.js b/packages/kolibri-tools/jest.conf/setup.js
index 1b72290dbf0..eabd097ae5b 100644
--- a/packages/kolibri-tools/jest.conf/setup.js
+++ b/packages/kolibri-tools/jest.conf/setup.js
@@ -8,7 +8,6 @@ import * as AphroditeNoImportant from 'aphrodite/no-important';
 import Vue from 'vue';
 import VueMeta from 'vue-meta';
 import VueRouter from 'vue-router';
-import VueCompositionApi from '@vue/composition-api';
 import Vuex from 'vuex';
 import logging from 'kolibri-logging';
 import { i18nSetup } from 'kolibri/utils/i18n';
@@ -46,7 +45,6 @@ Vue.mixin({
 Vue.use(VueRouter);
 Vue.use(VueMeta);
 Vue.use(KThemePlugin);
-Vue.use(VueCompositionApi);
 
 Vue.component('ContentRenderer', {
   render(h) {
diff --git a/packages/kolibri-tools/lib/moduleMapping.js b/packages/kolibri-tools/lib/moduleMapping.js
index 76ff8478c6d..e1ef2005bf4 100644
--- a/packages/kolibri-tools/lib/moduleMapping.js
+++ b/packages/kolibri-tools/lib/moduleMapping.js
@@ -8,7 +8,7 @@ module.exports = {
   'kolibri.lib.logging': 'kolibri-logging',
   'kolibri.lib.vue': 'vue',
   'kolibri.lib.vuex': 'vuex',
-  'kolibri.lib.vueCompositionApi': '@vue/composition-api',
+  'kolibri.lib.vueCompositionApi': 'vue',
   'kolibri.lib.apiResource': 'kolibri/apiResource',
   'kolibri.coreVue.vuex.constants': 'kolibri/constants',
   'kolibri.coreVue.vuex.getters': null,
diff --git a/packages/kolibri-tools/lib/webpack.config.plugin.js b/packages/kolibri-tools/lib/webpack.config.plugin.js
index e83de71d982..0673810a4ee 100644
--- a/packages/kolibri-tools/lib/webpack.config.plugin.js
+++ b/packages/kolibri-tools/lib/webpack.config.plugin.js
@@ -186,16 +186,19 @@ module.exports = (
 
   if (isCoreBundle) {
     bundle.plugins.push(
-      // We need to do this to sidestep the janky @vue/composition-api package's index.js which
+      // I thought we would be able to stop doing this once we dropped @vue/composition-api
+      // and upgraded to Vue 2.7 - but apparently this janky aliasing was _so_ good it was put
+      // into Vue 2.7 too!
+      // We need to do this to sidestep the janky vue main export dist/vue.runtime.common.js which
       // conditionally imports the prod or dev version of the package based on the NODE_ENV, but
       // only exposes the common JS builds, and reassigns them to the module.exports, thereby
       // preventing webpack from importing it consistently in both how we use it internally
       // in the core bundle, and also then access it via externals in the plugin bundles.
       new webpack.NormalModuleReplacementPlugin(
-        /^@vue\/composition-api$/,
+        /^vue$/,
         mode === 'production'
-          ? '@vue/composition-api/dist/vue-composition-api.prod.js'
-          : '@vue/composition-api/dist/vue-composition-api.js',
+          ? 'vue/dist/vue.runtime.common.prod.js'
+          : 'vue/dist/vue.runtime.common.dev.js',
       ),
     );
   }
diff --git a/packages/kolibri-tools/package.json b/packages/kolibri-tools/package.json
index fde56a9c072..a77488f2f52 100644
--- a/packages/kolibri-tools/package.json
+++ b/packages/kolibri-tools/package.json
@@ -73,7 +73,7 @@
     "vue-loader": "^15.11.1",
     "vue-sfc-descriptor-to-string": "1.0.0",
     "vue-style-loader": "^4.1.3",
-    "vue-template-compiler": "2.6.14",
+    "vue-template-compiler": "2.7.16",
     "webpack": "^5.97.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0",
diff --git a/packages/kolibri/__tests__/heartbeat.spec.js b/packages/kolibri/__tests__/heartbeat.spec.js
index 1e2a286d569..a389ef59e29 100644
--- a/packages/kolibri/__tests__/heartbeat.spec.js
+++ b/packages/kolibri/__tests__/heartbeat.spec.js
@@ -4,7 +4,7 @@ import redirectBrowser from 'kolibri/utils/redirectBrowser';
 import * as serverClock from 'kolibri/utils/serverClock';
 import { get, set } from '@vueuse/core';
 import useSnackbar, { useSnackbarMock } from 'kolibri/composables/useSnackbar'; // eslint-disable-line
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { DisconnectionErrorCodes } from 'kolibri/constants';
 import { HeartBeat } from '../heartbeat.js';
 import { trs } from '../internal/disconnection';
diff --git a/packages/kolibri/components/pages/AppBarPage/internal/AppBar.vue b/packages/kolibri/components/pages/AppBarPage/internal/AppBar.vue
index 2df9f76a797..496a6978404 100644
--- a/packages/kolibri/components/pages/AppBarPage/internal/AppBar.vue
+++ b/packages/kolibri/components/pages/AppBarPage/internal/AppBar.vue
@@ -128,7 +128,7 @@
 <script>
 
   import { get } from '@vueuse/core';
-  import { computed, getCurrentInstance } from '@vue/composition-api';
+  import { computed, getCurrentInstance } from 'vue';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import KToolbar from 'kolibri-design-system/lib/KToolbar';
   import KIconButton from 'kolibri-design-system/lib/buttons-and-links/KIconButton';
diff --git a/packages/kolibri/components/pages/AppBarPage/internal/__tests__/TotalPoints.spec.js b/packages/kolibri/components/pages/AppBarPage/internal/__tests__/TotalPoints.spec.js
index 6932dfb0d7a..a837217bae7 100644
--- a/packages/kolibri/components/pages/AppBarPage/internal/__tests__/TotalPoints.spec.js
+++ b/packages/kolibri/components/pages/AppBarPage/internal/__tests__/TotalPoints.spec.js
@@ -2,7 +2,7 @@ import { render, screen, fireEvent } from '@testing-library/vue';
 import useUser, { useUserMock } from 'kolibri/composables/useUser'; // eslint-disable-line
 import useTotalProgress, { useTotalProgressMock } from 'kolibri/composables/useTotalProgress'; // eslint-disable-line
 import '@testing-library/jest-dom';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { get, set } from '@vueuse/core';
 import TotalPoints from '../TotalPoints.vue';
 
diff --git a/packages/kolibri/composables/__mocks__/useSnackbar.js b/packages/kolibri/composables/__mocks__/useSnackbar.js
index 20fdff28565..0aec4c5a85c 100644
--- a/packages/kolibri/composables/__mocks__/useSnackbar.js
+++ b/packages/kolibri/composables/__mocks__/useSnackbar.js
@@ -29,7 +29,7 @@
  * })
  * ```
  */
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { get, set } from '@vueuse/core';
 
 const MOCK_DEFAULTS = {
diff --git a/packages/kolibri/composables/__mocks__/useTotalProgress.js b/packages/kolibri/composables/__mocks__/useTotalProgress.js
index 7757e68b673..fd42a7de866 100644
--- a/packages/kolibri/composables/__mocks__/useTotalProgress.js
+++ b/packages/kolibri/composables/__mocks__/useTotalProgress.js
@@ -29,7 +29,7 @@
  * })
  * ```
  */
-import { ref, computed } from '@vue/composition-api';
+import { ref, computed } from 'vue';
 import { get, set } from '@vueuse/core';
 import { MaxPointsPerContent } from 'kolibri/constants';
 
diff --git a/packages/kolibri/composables/__mocks__/useUser.js b/packages/kolibri/composables/__mocks__/useUser.js
index c179ee9273c..1c15e6fdd6c 100644
--- a/packages/kolibri/composables/__mocks__/useUser.js
+++ b/packages/kolibri/composables/__mocks__/useUser.js
@@ -30,7 +30,7 @@
  * useUser.mockImplementation(() => useUserMock())
  * ```
  */
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 import { UserKinds } from 'kolibri/constants';
 
 const session = {
diff --git a/packages/kolibri/composables/internal/useScrollPosition.js b/packages/kolibri/composables/internal/useScrollPosition.js
index 113f575b9c7..90da0ba743a 100644
--- a/packages/kolibri/composables/internal/useScrollPosition.js
+++ b/packages/kolibri/composables/internal/useScrollPosition.js
@@ -1,4 +1,4 @@
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 import { get } from '@vueuse/core';
 
 export default function useScrollPosition() {
diff --git a/packages/kolibri/composables/useNav.js b/packages/kolibri/composables/useNav.js
index 805d3372ea8..63a7e650397 100644
--- a/packages/kolibri/composables/useNav.js
+++ b/packages/kolibri/composables/useNav.js
@@ -3,7 +3,7 @@ import { KolibriIcons } from 'kolibri-design-system/lib/KIcon/iconDefinitions';
 import { get } from '@vueuse/core';
 import { UserKinds, NavComponentSections } from 'kolibri/constants';
 import logger from 'kolibri-logging';
-import { computed, getCurrentInstance } from '@vue/composition-api';
+import { computed, getCurrentInstance } from 'vue';
 import { generateNavRoute } from './internal/generateNavRoutes';
 
 const logging = logger.getLogger(__filename);
diff --git a/packages/kolibri/composables/useNow.js b/packages/kolibri/composables/useNow.js
index b003ff9824d..137606a772b 100644
--- a/packages/kolibri/composables/useNow.js
+++ b/packages/kolibri/composables/useNow.js
@@ -1,6 +1,6 @@
 import { now as getNow } from 'kolibri/utils/serverClock';
 
-import { ref, onMounted, onUnmounted } from '@vue/composition-api';
+import { ref, onMounted, onUnmounted } from 'vue';
 
 export default function useNow(interval = 10000) {
   const now = ref(getNow());
diff --git a/packages/kolibri/composables/useSnackbar.js b/packages/kolibri/composables/useSnackbar.js
index 333ac5b8c1f..2767071d8a5 100644
--- a/packages/kolibri/composables/useSnackbar.js
+++ b/packages/kolibri/composables/useSnackbar.js
@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { get, set } from '@vueuse/core';
 
 const snackbarIsVisible = ref(false);
diff --git a/packages/kolibri/composables/useTotalProgress.js b/packages/kolibri/composables/useTotalProgress.js
index dd15944068b..a5abc46fc57 100644
--- a/packages/kolibri/composables/useTotalProgress.js
+++ b/packages/kolibri/composables/useTotalProgress.js
@@ -1,4 +1,4 @@
-import { ref, computed } from '@vue/composition-api';
+import { ref, computed } from 'vue';
 import { get, set } from '@vueuse/core';
 import useUser from 'kolibri/composables/useUser';
 import UserProgressResource from 'kolibri-common/apiResources/UserProgressResource';
diff --git a/packages/kolibri/composables/useUser.js b/packages/kolibri/composables/useUser.js
index 88f59f4816c..987fe1dbcd8 100644
--- a/packages/kolibri/composables/useUser.js
+++ b/packages/kolibri/composables/useUser.js
@@ -1,4 +1,4 @@
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 import store from 'kolibri/store';
 
 export default function useUser() {
diff --git a/packages/kolibri/index.js b/packages/kolibri/index.js
index 993ad2002c0..c335b531b17 100644
--- a/packages/kolibri/index.js
+++ b/packages/kolibri/index.js
@@ -2,7 +2,6 @@ import Vue from 'vue';
 import VueMeta from 'vue-meta';
 import VueRouter from 'vue-router';
 import Vuex from 'vuex';
-import VueCompositionApi from '@vue/composition-api';
 import KThemePlugin from 'kolibri-design-system/lib/KThemePlugin';
 import ContentRenderer from './components/internal/ContentRenderer';
 import initializeTheme from './styles/internal/initializeTheme';
@@ -27,7 +26,6 @@ initializeTheme();
 Vue.use(Vuex);
 Vue.use(VueRouter);
 Vue.use(VueMeta);
-Vue.use(VueCompositionApi);
 
 // - Installs helpers on Vue instances: $themeBrand, $themeTokens, $themePalette
 // - Set up global state, listeners, and styles
diff --git a/packages/kolibri/internal/apiSpec.js b/packages/kolibri/internal/apiSpec.js
index 8afaeba9634..1748254f346 100644
--- a/packages/kolibri/internal/apiSpec.js
+++ b/packages/kolibri/internal/apiSpec.js
@@ -49,5 +49,4 @@ export default {
   'kolibri-logging': require('kolibri-logging'),
   vue: require('vue'),
   vuex: require('vuex'),
-  '@vue/composition-api': require('@vue/composition-api'),
 };
diff --git a/packages/kolibri/internal/useConnection.js b/packages/kolibri/internal/useConnection.js
index 45f55a9a5d5..4d1600e47fb 100644
--- a/packages/kolibri/internal/useConnection.js
+++ b/packages/kolibri/internal/useConnection.js
@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 
 const connected = ref(true);
 const reconnectTime = ref(null);
diff --git a/packages/kolibri/package.json b/packages/kolibri/package.json
index c5e0066540f..4d5fd141871 100644
--- a/packages/kolibri/package.json
+++ b/packages/kolibri/package.json
@@ -57,23 +57,21 @@
   "exposes": [
     "kolibri-logging",
     "vue",
-    "vuex",
-    "@vue/composition-api"
+    "vuex"
   ],
   "dependencies": {
-    "@vue/composition-api": "^1.7.2",
-    "@vueuse/core": "^9.13.0",
+    "@vueuse/core": "^11.3.0",
     "axios": "^1.7.8",
     "fontfaceobserver": "^2.3.0",
     "frame-throttle": "^3.0.0",
     "intl": "^1.2.4",
     "kolibri-constants": "0.2.8",
-    "kolibri-design-system": "5.0.0-rc10",
+    "kolibri-design-system": "5.0.0-rc11",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "path-to-regexp": "1.9.0",
     "ua-parser-js": "^1.0.39",
-    "vue": "2.6.14",
+    "vue": "2.7.16",
     "vue-intl": "3.1.0",
     "vue-meta": "^2.4.0",
     "vue-router": "^3.6.5",
diff --git a/packages/kolibri/styles/internal/initializeTheme.js b/packages/kolibri/styles/internal/initializeTheme.js
index d45c3997529..446087f83d3 100644
--- a/packages/kolibri/styles/internal/initializeTheme.js
+++ b/packages/kolibri/styles/internal/initializeTheme.js
@@ -1,7 +1,7 @@
 import './main.scss'; // attaches styles globally
 import { setBrandColors, setTokenMapping } from 'kolibri-design-system/lib/styles/theme';
 import generateGlobalStyles from 'kolibri-design-system/lib/styles/generateGlobalStyles';
-import Vue from 'vue';
+import { set } from 'vue';
 import trackInputModality from 'kolibri-design-system/lib/styles/trackInputModality';
 import trackMediaType from 'kolibri-design-system/lib/styles/trackMediaType';
 import themeConfig from 'kolibri/styles/themeConfig';
@@ -11,7 +11,7 @@ import themeSpec from './themeSpec';
 
 export function setThemeConfig(theme) {
   Object.keys(themeConfig).forEach(key => {
-    Vue.set(themeConfig, key, theme[key]);
+    set(themeConfig, key, theme[key]);
   });
 }
 
diff --git a/yarn.lock b/yarn.lock
index fded25be193..504f971dba7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -314,6 +314,13 @@
   dependencies:
     "@babel/types" "^7.26.0"
 
+"@babel/parser@^7.23.5":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.3.tgz#8c51c5db6ddf08134af1ddbacf16aaab48bac234"
+  integrity sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==
+  dependencies:
+    "@babel/types" "^7.26.3"
+
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.9.tgz#cc2e53ebf0a0340777fff5ed521943e253b4d8fe"
@@ -1102,6 +1109,14 @@
     "@babel/helper-string-parser" "^7.25.9"
     "@babel/helper-validator-identifier" "^7.25.9"
 
+"@babel/types@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.3.tgz#37e79830f04c2b5687acc77db97fbc75fb81f3c0"
+  integrity sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -2417,10 +2432,10 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"
   integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
 
-"@types/web-bluetooth@^0.0.16":
-  version "0.0.16"
-  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
-  integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
+"@types/web-bluetooth@^0.0.20":
+  version "0.0.20"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
+  integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
 
 "@types/ws@^8.5.10":
   version "8.5.10"
@@ -2535,6 +2550,17 @@
     global "~4.4.0"
     is-function "^1.0.1"
 
+"@vue/compiler-sfc@2.7.16":
+  version "2.7.16"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz#ff81711a0fac9c68683d8bb00b63f857de77dc83"
+  integrity sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==
+  dependencies:
+    "@babel/parser" "^7.23.5"
+    postcss "^8.4.14"
+    source-map "^0.6.1"
+  optionalDependencies:
+    prettier "^1.18.2 || ^2.0.0"
+
 "@vue/component-compiler-utils@^3.1.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
@@ -2551,11 +2577,6 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
-"@vue/composition-api@1.7.2", "@vue/composition-api@^1.7.2":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-1.7.2.tgz#0b656f3ec39fefc2cf40aaa8c12426bcfeae1b44"
-  integrity sha512-M8jm9J/laYrYT02665HkZ5l2fWTK4dcVg3BsDHm/pfz+MjDYwX+9FUaZyGwEyXEDonQYRCo0H7aLgdklcIELjw==
-
 "@vue/test-utils@^1.3.0", "@vue/test-utils@^1.3.6":
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.3.6.tgz#6656bd8fa44dd088b4ad80ff1ee28abe7e5ddf87"
@@ -2565,27 +2586,27 @@
     lodash "^4.17.15"
     pretty "^2.0.0"
 
-"@vueuse/core@^9.13.0":
-  version "9.13.0"
-  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.13.0.tgz#2f69e66d1905c1e4eebc249a01759cf88ea00cf4"
-  integrity sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==
+"@vueuse/core@^11.3.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-11.3.0.tgz#bb0bd1f0edd5435d20694dbe51091cf548653a4d"
+  integrity sha512-7OC4Rl1f9G8IT6rUfi9JrKiXy4bfmHhZ5x2Ceojy0jnd3mHNEvV4JaRygH362ror6/NZ+Nl+n13LPzGiPN8cKA==
   dependencies:
-    "@types/web-bluetooth" "^0.0.16"
-    "@vueuse/metadata" "9.13.0"
-    "@vueuse/shared" "9.13.0"
-    vue-demi "*"
+    "@types/web-bluetooth" "^0.0.20"
+    "@vueuse/metadata" "11.3.0"
+    "@vueuse/shared" "11.3.0"
+    vue-demi ">=0.14.10"
 
-"@vueuse/metadata@9.13.0":
-  version "9.13.0"
-  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-9.13.0.tgz#bc25a6cdad1b1a93c36ce30191124da6520539ff"
-  integrity sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==
+"@vueuse/metadata@11.3.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-11.3.0.tgz#be7ac12e3016c0353a3667b372a73aeeee59194e"
+  integrity sha512-pwDnDspTqtTo2HwfLw4Rp6yywuuBdYnPYDq+mO38ZYKGebCUQC/nVj/PXSiK9HX5otxLz8Fn7ECPbjiRz2CC3g==
 
-"@vueuse/shared@9.13.0":
-  version "9.13.0"
-  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-9.13.0.tgz#089ff4cc4e2e7a4015e57a8f32e4b39d096353b9"
-  integrity sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==
+"@vueuse/shared@11.3.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-11.3.0.tgz#086a4f35bf5bcec5655a03b80eae582605a4b21d"
+  integrity sha512-P8gSSWQeucH5821ek2mn/ciCk+MS/zoRKqdQIM3bHq6p7GXDAJLmnRRKmF5F65sAVJIfzQlwR3aDzwCn10s8hA==
   dependencies:
-    vue-demi "*"
+    vue-demi ">=0.14.10"
 
 "@webassemblyjs/ast@1.14.1", "@webassemblyjs/ast@^1.14.1":
   version "1.14.1"
@@ -4271,6 +4292,11 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+csstype@^3.1.0:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 csv-generator-client@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/csv-generator-client/-/csv-generator-client-2.1.1.tgz#5da6a1439c6cc612fc2ac6e293bf8da1b82702ee"
@@ -6242,7 +6268,7 @@ hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
-he@^1.1.0, he@^1.2.0:
+he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -7770,12 +7796,11 @@ kolibri-constants@0.2.8:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.8.tgz#34ad2e2b87cf132ebe8dbaa9b64dc4a7bf261f8d"
   integrity sha512-ycXeK+ePw7zkiNtf+nX/yF5BO52+onoYS2V3d9HZDIvx7X6CDJPtMcypkXrK9aZ0JbWAegRFMD/lAd8q21cf4Q==
 
-kolibri-design-system@5.0.0-rc10:
-  version "5.0.0-rc10"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-5.0.0-rc10.tgz#8c92a1b097878a2a8e2f67cda76771914f77b7b8"
-  integrity sha512-Dkk5D5PunIm+qPsIMmgo06rjA0BkPZOOpeABuPgZmtpXcFwhpAP07VrLs0LhvFBdSFri3aJDXj/kj7HskXLhWg==
+kolibri-design-system@5.0.0-rc11:
+  version "5.0.0-rc11"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-5.0.0-rc11.tgz#433b31d25337255708cf1bc28b86e4d619962f98"
+  integrity sha512-g3mxd+Bd82al5Bf3zfO3tizItI/LeMVCUVXwifv8rtbukIa5aoWDwCTUJkdnEQCFSZR5WQ0k9mhieIAe47ebvQ==
   dependencies:
-    "@vue/composition-api" "1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"
     autosize "3.0.21"
     color "3.2.1"
@@ -7787,6 +7812,7 @@ kolibri-design-system@5.0.0-rc10:
     popper.js "1.16.1"
     purecss "2.2.0"
     tippy.js "4.3.5"
+    vue "2"
     vue-intl "3.1.0"
     vue2-teleport "1.1.4"
     xstate "4.38.3"
@@ -9024,7 +9050,7 @@ picocolors@^0.2.1:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
   integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
 
-picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0:
+picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0, picocolors@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
   integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
@@ -9408,6 +9434,15 @@ postcss@^8.2.14, postcss@^8.4.0, postcss@^8.4.21, postcss@^8.4.28, postcss@^8.4.
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
+postcss@^8.4.14:
+  version "8.4.49"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -10528,6 +10563,11 @@ source-map-js@^1.2.0:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
+source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
 source-map-resolve@^0.5.2:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -10709,16 +10749,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -10796,14 +10827,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -11694,10 +11718,10 @@ videojs-vtt.js@^0.15.5:
   dependencies:
     global "^4.3.1"
 
-vue-demi@*:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.9.0.tgz#b30da61450079d60a132d7aaf9e86d1949e8445e"
-  integrity sha512-f8vVUpC726YXv99fF/3zHaw5CUYbP5H/DVWBN+pncXM8P2Uz88kkffwj9yD7MukuVzPICDHNrgS3VC2ursaP7g==
+vue-demi@>=0.14.10:
+  version "0.14.10"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
+  integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
 
 vue-eslint-parser@^9.4.3:
   version "9.4.3"
@@ -11799,13 +11823,13 @@ vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@2.6.14:
-  version "2.6.14"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz#a2f0e7d985670d42c9c9ee0d044fed7690f4f763"
-  integrity sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==
+vue-template-compiler@2.7.16:
+  version "2.7.16"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"
+  integrity sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==
   dependencies:
     de-indent "^1.0.2"
-    he "^1.1.0"
+    he "^1.2.0"
 
 vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   version "1.9.1"
@@ -11826,10 +11850,13 @@ vue2-teleport@1.1.4:
   resolved "https://registry.yarnpkg.com/vue2-teleport/-/vue2-teleport-1.1.4.tgz#30c84b1005bf9c208b1c05f4b6147300c54ee846"
   integrity sha512-mGTszyQP6k3sSSk7MBq+PZdVojHYLwg5772hl3UVpu5uaLBqWIZ5eNP6/TjkDrf1XUTTxybvpXC6inpjwO+i/Q==
 
-vue@2.6.14:
-  version "2.6.14"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
-  integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
+vue@2, vue@2.7.16:
+  version "2.7.16"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.16.tgz#98c60de9def99c0e3da8dae59b304ead43b967c9"
+  integrity sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==
+  dependencies:
+    "@vue/compiler-sfc" "2.7.16"
+    csstype "^3.1.0"
 
 vuex-router-sync@^5.0.0:
   version "5.0.0"
@@ -12140,16 +12167,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==