diff --git a/app/assets/javascripts/discourse/app/components/emoji-picker.js b/app/assets/javascripts/discourse/app/components/emoji-picker.js
index d54f52160e8..48dde62dcee 100644
--- a/app/assets/javascripts/discourse/app/components/emoji-picker.js
+++ b/app/assets/javascripts/discourse/app/components/emoji-picker.js
@@ -1,5 +1,8 @@
 import { action, computed } from "@ember/object";
-import { bind, observes } from "discourse-common/utils/decorators";
+import discourseComputed, {
+  bind,
+  observes,
+} from "discourse-common/utils/decorators";
 import {
   emojiSearch,
   extendedEmojiList,
@@ -31,7 +34,6 @@ export default Component.extend({
   emojiStore: service("emoji-store"),
   tagName: "",
   customEmojis: null,
-  selectedDiversity: null,
   recentEmojis: null,
   hoveredEmoji: null,
   isActive: false,
@@ -42,7 +44,6 @@ export default Component.extend({
     this._super(...arguments);
 
     this.set("customEmojis", customEmojis());
-    this.set("selectedDiversity", this.emojiStore.diversity);
 
     if ("IntersectionObserver" in window) {
       this._sectionObserver = this._setupSectionObserver();
@@ -55,6 +56,13 @@ export default Component.extend({
     this.appEvents.on("emoji-picker:close", this, "onClose");
   },
 
+  // `readOnly` may seem like a better choice here, but the computed property
+  // provides caching (emojiStore.diversity is a simple getter)
+  @discourseComputed("emojiStore.diversity")
+  selectedDiversity(diversity) {
+    return diversity;
+  },
+
   // didReceiveAttrs would be a better choice here, but this is sadly causing
   // too many unexpected reloads as it's triggered for other reasons than a mutation
   // of isActive
@@ -186,7 +194,6 @@ export default Component.extend({
   onDiversitySelection(index) {
     const scale = index + 1;
     this.emojiStore.diversity = scale;
-    this.set("selectedDiversity", scale);
 
     this._applyDiversity(scale);
   },
diff --git a/app/assets/javascripts/discourse/app/services/emoji-store.js b/app/assets/javascripts/discourse/app/services/emoji-store.js
index 38a0c76eedf..f7aa11bb28e 100644
--- a/app/assets/javascripts/discourse/app/services/emoji-store.js
+++ b/app/assets/javascripts/discourse/app/services/emoji-store.js
@@ -23,6 +23,7 @@ export default Service.extend({
 
   set diversity(value) {
     this.store.setObject({ key: EMOJI_SELECTED_DIVERSITY, value: value || 1 });
+    this.notifyPropertyChange("diversity");
   },
 
   get favorites() {