diff --git a/web-src/src/pages/PageAlbums.vue b/web-src/src/pages/PageAlbums.vue
index 6a8a26bd..a3b7b64c 100644
--- a/web-src/src/pages/PageAlbums.vue
+++ b/web-src/src/pages/PageAlbums.vue
@@ -41,8 +41,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.albums.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_option_id"
-              :options="grouping_options"
+              v-model:value="selected_grouping_id"
+              :options="groupings"
             />
           </div>
         </div>
@@ -101,7 +101,7 @@ export default {
   data() {
     return {
       albums_list: new GroupedList(),
-      grouping_options: [
+      groupings: [
         {
           id: 1,
           name: this.$t('page.albums.sort.name'),
@@ -151,8 +151,8 @@ export default {
 
   computed: {
     albums() {
-      const grouping = this.grouping_options.find(
-        (o) => o.id === this.selected_grouping_option_id
+      const grouping = this.groupings.find(
+        (grouping) => grouping.id === this.selected_grouping_id
       )
       grouping.options.filters = [
         (album) => !this.hide_singles || album.track_count > 2,
@@ -178,7 +178,7 @@ export default {
         this.$store.commit(types.HIDE_SPOTIFY, value)
       }
     },
-    selected_grouping_option_id: {
+    selected_grouping_id: {
       get() {
         return this.$store.state.albums_sort
       },
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index 3d5597df..51cc03d5 100644
--- a/web-src/src/pages/PageArtist.vue
+++ b/web-src/src/pages/PageArtist.vue
@@ -24,8 +24,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_option_id"
-              :options="grouping_options"
+              v-model:value="selected_grouping_id"
+              :options="groupings"
             />
           </div>
         </div>
@@ -112,7 +112,7 @@ export default {
     return {
       albums_list: new GroupedList(),
       artist: {},
-      grouping_options: [
+      groupings: [
         {
           id: 1,
           name: this.$t('page.artist.sort.name'),
@@ -130,8 +130,8 @@ export default {
 
   computed: {
     albums() {
-      const grouping = this.grouping_options.find(
-        (o) => o.id === this.selected_grouping_option_id
+      const grouping = this.groupings.find(
+        (grouping) => grouping.id === this.selected_grouping_id
       )
       grouping.options.filters = [
         (album) => !this.hide_spotify || album.data_kind !== 'spotify'
@@ -147,7 +147,7 @@ export default {
         this.$store.commit(types.HIDE_SPOTIFY, value)
       }
     },
-    selected_grouping_option_id: {
+    selected_grouping_id: {
       get() {
         return this.$store.state.artist_albums_sort
       },
diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue
index d0576718..62f352b7 100644
--- a/web-src/src/pages/PageArtistTracks.vue
+++ b/web-src/src/pages/PageArtistTracks.vue
@@ -25,8 +25,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_option_id"
-              :options="grouping_options"
+              v-model:value="selected_grouping_id"
+              :options="groupings"
             />
           </div>
         </div>
@@ -114,7 +114,7 @@ export default {
   data() {
     return {
       artist: {},
-      grouping_options: [
+      groupings: [
         {
           id: 1,
           name: this.$t('page.artist.sort.name'),
@@ -150,7 +150,7 @@ export default {
         this.$store.commit(types.HIDE_SPOTIFY, value)
       }
     },
-    selected_grouping_option_id: {
+    selected_grouping_id: {
       get() {
         return this.$store.state.artist_tracks_sort
       },
@@ -165,8 +165,8 @@ export default {
       return this.tracks_list.items.map((item) => item.uri).join()
     },
     tracks() {
-      const grouping = this.grouping_options.find(
-        (o) => o.id === this.selected_grouping_option_id
+      const grouping = this.groupings.find(
+        (grouping) => grouping.id === this.selected_grouping_id
       )
       grouping.options.filters = [
         (track) => !this.hide_spotify || track.data_kind !== 'spotify'
diff --git a/web-src/src/pages/PageArtists.vue b/web-src/src/pages/PageArtists.vue
index e2acb071..0b3134d3 100644
--- a/web-src/src/pages/PageArtists.vue
+++ b/web-src/src/pages/PageArtists.vue
@@ -41,8 +41,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artists.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_option_id"
-              :options="grouping_options"
+              v-model:value="selected_grouping_id"
+              :options="groupings"
             />
           </div>
         </div>
@@ -101,7 +101,7 @@ export default {
   data() {
     return {
       artists_list: new GroupedList(),
-      grouping_options: [
+      groupings: [
         {
           id: 1,
           name: this.$t('page.artists.sort.name'),
@@ -125,8 +125,8 @@ export default {
       if (!this.artists_list) {
         return []
       }
-      const grouping = this.grouping_options.find(
-        (o) => o.id === this.selected_grouping_option_id
+      const grouping = this.groupings.find(
+        (grouping) => grouping.id === this.selected_grouping_id
       )
       grouping.options.filters = [
         (artist) =>
@@ -152,7 +152,7 @@ export default {
         this.$store.commit(types.HIDE_SPOTIFY, value)
       }
     },
-    selected_grouping_option_id: {
+    selected_grouping_id: {
       get() {
         return this.$store.state.artists_sort
       },
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index d1361fb1..a9b495b7 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -7,8 +7,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_option_id"
-              :options="grouping_options"
+              v-model:value="selected_grouping_id"
+              :options="groupings"
             />
           </div>
         </div>
@@ -102,7 +102,7 @@ export default {
   data() {
     return {
       composer: {},
-      grouping_options: [
+      groupings: [
         {
           id: 1,
           name: this.$t('page.composer.sort.name'),
@@ -126,7 +126,7 @@ export default {
     expression() {
       return `composer is "${this.composer.name}" and media_kind is music`
     },
-    selected_grouping_option_id: {
+    selected_grouping_id: {
       get() {
         return this.$store.state.composer_tracks_sort
       },
@@ -135,8 +135,8 @@ export default {
       }
     },
     tracks() {
-      const grouping = this.grouping_options.find(
-        (o) => o.id === this.selected_grouping_option_id
+      const grouping = this.groupings.find(
+        (grouping) => grouping.id === this.selected_grouping_id
       )
       this.tracks_list.group(grouping.options)
       return this.tracks_list
diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue
index 784c9c73..27b51ea1 100644
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -7,8 +7,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.genre.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_option_id"
-              :options="grouping_options"
+              v-model:value="selected_grouping_id"
+              :options="groupings"
             />
           </div>
         </div>
@@ -97,7 +97,7 @@ export default {
   data() {
     return {
       genre: {},
-      grouping_options: [
+      groupings: [
         {
           id: 1,
           name: this.$t('page.genre.sort.name'),
@@ -122,7 +122,7 @@ export default {
     expression() {
       return `genre is "${this.genre.name}" and media_kind is ${this.media_kind}`
     },
-    selected_grouping_option_id: {
+    selected_grouping_id: {
       get() {
         return this.$store.state.genre_tracks_sort
       },
@@ -131,8 +131,8 @@ export default {
       }
     },
     tracks() {
-      const grouping = this.grouping_options.find(
-        (o) => o.id === this.selected_grouping_option_id
+      const grouping = this.groupings.find(
+        (grouping) => grouping.id === this.selected_grouping_id
       )
       this.tracks_list.group(grouping.options)
       return this.tracks_list