diff --git a/app/assets/javascripts/discourse/app/controllers/avatar-selector.js b/app/assets/javascripts/discourse/app/controllers/avatar-selector.js
index eab7d45a2aa..7cb45162cfc 100644
--- a/app/assets/javascripts/discourse/app/controllers/avatar-selector.js
+++ b/app/assets/javascripts/discourse/app/controllers/avatar-selector.js
@@ -7,6 +7,8 @@ import discourseComputed from "discourse-common/utils/decorators";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { setting } from "discourse/lib/computed";
 import { isTesting } from "discourse-common/config/environment";
+import { dependentKeyCompat } from "@ember/object/compat";
+import { tracked } from "@glimmer/tracking";
 
 export default Controller.extend(ModalFunctionality, {
   gravatarName: setting("gravatar_name"),
@@ -56,23 +58,30 @@ export default Controller.extend(ModalFunctionality, {
     }
   },
 
-  @discourseComputed(
-    "user.use_logo_small_as_avatar",
-    "user.avatar_template",
-    "user.system_avatar_template",
-    "user.gravatar_avatar_template"
-  )
-  selected(
-    useLogo,
-    avatarTemplate,
-    systemAvatarTemplate,
-    gravatarAvatarTemplate
-  ) {
-    if (useLogo) {
+  @tracked _selected: null,
+
+  @dependentKeyCompat
+  get selected() {
+    return this._selected ?? this.defaultSelection;
+  },
+
+  @action
+  onSelectedChanged(value) {
+    this._selected = value;
+  },
+
+  get defaultSelection() {
+    if (this.get("user.use_logo_small_as_avatar")) {
       return "logo";
-    } else if (avatarTemplate === systemAvatarTemplate) {
+    } else if (
+      this.get("user.avatar_template") ===
+      this.get("user.system_avatar_template")
+    ) {
       return "system";
-    } else if (avatarTemplate === gravatarAvatarTemplate) {
+    } else if (
+      this.get("user.avatar_template") ===
+      this.get("user.gravatar_avatar_template")
+    ) {
       return "gravatar";
     } else {
       return "custom";
diff --git a/app/assets/javascripts/discourse/app/templates/modal/avatar-selector.hbs b/app/assets/javascripts/discourse/app/templates/modal/avatar-selector.hbs
index 35f6bb9dd0d..0ddbcd20b11 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/avatar-selector.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/avatar-selector.hbs
@@ -23,6 +23,7 @@
           @name="logo"
           @value="logo"
           @selection={{this.selected}}
+          @onChange={{this.onSelectedChanged}}
         />
         <label class="radio" for="logo-small">{{bound-avatar-template
             this.siteSettings.site_logo_small_url
@@ -37,6 +38,7 @@
         @name="avatar"
         @value="system"
         @selection={{this.selected}}
+        @onChange={{this.onSelectedChanged}}
       />
       <label class="radio" for="system-avatar">{{bound-avatar-template
           this.user.system_avatar_template
@@ -51,6 +53,7 @@
           @name="avatar"
           @value="gravatar"
           @selection={{this.selected}}
+          @onChange={{this.onSelectedChanged}}
         />
         <label class="radio" for="gravatar">{{bound-avatar-template
             this.user.gravatar_avatar_template
@@ -90,6 +93,7 @@
           @name="avatar"
           @value="custom"
           @selection={{this.selected}}
+          @onChange={{this.onSelectedChanged}}
         />
         <label class="radio" for="uploaded-avatar">
           {{#if this.user.custom_avatar_template}}