diff --git a/src/components/application/slplayer.vue b/src/components/application/slplayer.vue
index f253743e..1744da16 100644
--- a/src/components/application/slplayer.vue
+++ b/src/components/application/slplayer.vue
@@ -289,8 +289,8 @@ export default {
 
   created() {
     shaka.ui.OverflowMenu.registerElement('bitrate', BitrateSelectionFactory);
-    shaka.ui.OverflowMenu.registerElement('subtitle', new SubtitleSelectionFactory(this.eventbus));
-    shaka.ui.OverflowMenu.registerElement('audio',  AudioSelectionFactory);
+    shaka.ui.OverflowMenu.registerElement('subtitle', SubtitleSelectionFactory);
+    shaka.ui.OverflowMenu.registerElement('audio', AudioSelectionFactory);
     shaka.ui.OverflowMenu.registerElement('media', new MediaSelectionFactory(this.eventbus));
     shaka.ui.Controls.registerElement('close', CloseButtonFactory);
     shaka.ui.Controls.registerElement('forward30', Forward30ButtonFactory);
@@ -310,7 +310,6 @@ export default {
     this.bigPlayButton.addEventListener('click', this.onClick);
     this.smallPlayButton.addEventListener('click', this.onClick);
 
-    this.eventbus.$on('subtitlestreamselectionchanged', this.CHANGE_SUBTITLE_STREAM);
     this.eventbus.$on('mediaindexselectionchanged', this.CHANGE_MEDIA_INDEX);
 
     this.INIT_PLAYER_STATE();
@@ -323,7 +322,6 @@ export default {
     window.removeEventListener('keyup', this.onKeyUp);
     this.bigPlayButton.removeEventListener('click', this.onClick);
     this.smallPlayButton.removeEventListener('click', this.onClick);
-    this.eventbus.$off('subtitlestreamselectionchanged', this.CHANGE_SUBTITLE_STREAM);
     this.eventbus.$off('mediaindexselectionchanged', this.CHANGE_MEDIA_INDEX);
     this.eventbus.$emit('slplayerdestroy');
     this.DESTROY_PLAYER_STATE();
@@ -331,7 +329,6 @@ export default {
 
   methods: {
     ...mapActions('slplayer', [
-      'CHANGE_SUBTITLE_STREAM',
       'CHANGE_MEDIA_INDEX',
       'CHANGE_PLAYER_SRC',
       'HANDLE_PLAYER_PLAYING',
@@ -399,18 +396,6 @@ export default {
     },
 
     applyPlayerWatchers() {
-      this.$watch('GET_SUBTITLE_STREAMS', (newStreams) => {
-        this.eventbus.$emit('subtitlestreamschanged', newStreams);
-      }, {
-        immediate: true,
-      });
-
-      this.$watch('GET_SUBTITLE_STREAM_ID', (newId) => {
-        this.eventbus.$emit('subtitlestreamidchanged', newId);
-      }, {
-        immediate: true,
-      });
-
       this.$watch('GET_MEDIA_LIST', (newList) => {
         this.eventbus.$emit('medialistchanged', newList);
       }, {
diff --git a/src/player/ui/subtitleselection.js b/src/player/ui/subtitleselection.js
index 8a04af63..cd0e6eb8 100644
--- a/src/player/ui/subtitleselection.js
+++ b/src/player/ui/subtitleselection.js
@@ -1,29 +1,24 @@
-// eslint-disable-next-line max-classes-per-file
 import shaka from 'shaka-player/dist/shaka-player.ui.debug';
 import ShakaUtils from '@/player/ui/utils';
+import store from '@/store';
 
 class SubtitleSelection extends shaka.ui.SettingsMenu {
-  constructor(parent, controls, eventBus) {
-    super(parent, controls, 'subtitles');
-    this.eventBus = eventBus;
-    this.selectedSubtitleId = 0;
-    this.subtitleStreams = [];
-    this.eventListeners = [
-      {
-        event: 'subtitlestreamschanged',
-        fn: this.onSubtitleStreamsChanged.bind(this),
-      },
-      {
-        event: 'subtitlestreamidchanged',
-        fn: this.onSubtitleStreamIdChanged.bind(this),
-      },
-    ];
+  #watcherCancellers = [];
 
-    ShakaUtils.addEventListeners(this.eventListeners, this.eventBus);
-    this.eventBus.$once(
-      'slplayerdestroy',
-      () => ShakaUtils.removeEventListeners(this.eventListeners, this.eventBus),
-    );
+  constructor(parent, controls) {
+    super(parent, controls, 'subtitles');
+
+    this.#watcherCancellers = [
+      store.watch(
+        (state, getters) => getters['slplayer/GET_SUBTITLE_STREAMS'],
+        this.updateSubtitleSelection.bind(this),
+      ),
+
+      store.watch(
+        (state, getters) => getters['slplayer/GET_SUBTITLE_STREAM_ID'],
+        this.updateSubtitleSelection.bind(this),
+      ),
+    ];
 
     this.button.classList.add('shaka-subtitles-button');
     this.menu.classList.add('shaka-subtitles');
@@ -34,21 +29,9 @@ class SubtitleSelection extends shaka.ui.SettingsMenu {
     this.updateSubtitleSelection();
   }
 
-  onSubtitleStreamsChanged(streams) {
-    this.subtitleStreams = streams;
-    this.updateSubtitleSelection();
-  }
-
-  onSubtitleStreamIdChanged(id) {
-    if (id !== this.selectedSubtitleId) {
-      this.selectedSubtitleId = id;
-      this.updateSubtitleSelection();
-    }
-  }
-
   updateSubtitleSelection() {
     // Hide menu if there is only the None subtitle option
-    if (this.subtitleStreams.length <= 1) {
+    if (store.getters['slplayer/GET_SUBTITLE_STREAMS'].length <= 1) {
       ShakaUtils.setDisplay(this.menu, false);
       ShakaUtils.setDisplay(this.button, false);
       return;
@@ -73,7 +56,7 @@ class SubtitleSelection extends shaka.ui.SettingsMenu {
   }
 
   addSubtitleSelection() {
-    this.subtitleStreams.forEach((subtitle) => {
+    store.getters['slplayer/GET_SUBTITLE_STREAMS'].forEach((subtitle) => {
       const button = document.createElement('button');
       button.classList.add('explicit-subtitle');
 
@@ -87,7 +70,7 @@ class SubtitleSelection extends shaka.ui.SettingsMenu {
         () => this.onSubtitleClicked(subtitle.id),
       );
 
-      if (subtitle.id === this.selectedSubtitleId) {
+      if (subtitle.id === store.getters['slplayer/GET_SUBTITLE_STREAM_ID']) {
         button.setAttribute('aria-selected', 'true');
         button.appendChild(ShakaUtils.checkmarkIcon());
         span.classList.add('shaka-chosen-item');
@@ -99,18 +82,19 @@ class SubtitleSelection extends shaka.ui.SettingsMenu {
   }
 
   onSubtitleClicked(subtitleId) {
-    this.eventBus.$emit('subtitlestreamselectionchanged', subtitleId);
+    store.dispatch('slplayer/CHANGE_SUBTITLE_STREAM', subtitleId);
+  }
+
+  // TODO: replace this function name with "release" when upgrading to shaka 3
+  destroy() {
+    this.#watcherCancellers.forEach((canceller) => {
+      canceller();
+    });
+
+    super.destroy();
   }
 }
 
-class SubtitleSelectionFactory {
-  constructor(eventBus) {
-    this.eventBus = eventBus;
-  }
-
-  create(rootElement, controls) {
-    return new SubtitleSelection(rootElement, controls, this.eventBus);
-  }
-}
-
-export default SubtitleSelectionFactory;
+export default {
+  create: (rootElement, controls) => new SubtitleSelection(rootElement, controls),
+};