diff --git a/app/assets/javascripts/discourse/app/components/badge-button.js b/app/assets/javascripts/discourse/app/components/badge-button.js
index 0970e4b8a0b..0627cd5c918 100644
--- a/app/assets/javascripts/discourse/app/components/badge-button.js
+++ b/app/assets/javascripts/discourse/app/components/badge-button.js
@@ -1,13 +1,16 @@
 import Component from "@ember/component";
-import discourseComputed from "discourse-common/utils/decorators";
+import { computed } from "@ember/object";
 import domFromString from "discourse-common/lib/dom-from-string";
 
 export default class BadgeButtonComponent extends Component {
   tagName = "";
   badge = null;
 
-  @discourseComputed("badge.description")
-  title(badgeDescription) {
-    return domFromString(`<div>${badgeDescription}</div>`)[0].innerText;
+  @computed("badge.description")
+  get title() {
+    if (this.badge?.description) {
+      return domFromString(`<div>${this.badge?.description}</div>`)[0]
+        .innerText;
+    }
   }
 }
diff --git a/app/assets/javascripts/discourse/tests/integration/components/badge-button-test.js b/app/assets/javascripts/discourse/tests/integration/components/badge-button-test.js
index a6916ca114d..975d4c1075c 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/badge-button-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/badge-button-test.js
@@ -56,6 +56,14 @@ discourseModule("Integration | Component | badge-button", function (hooks) {
 
     async test(assert) {
       assert.equal(query(".user-badge").title, "a good run", "it strips html");
+
+      this.set("badge", { description: "a bad run" });
+
+      assert.equal(
+        query(".user-badge").title,
+        "a bad run",
+        "it updates title when changing description"
+      );
     },
   });