diff --git a/app/assets/javascripts/discourse/app/models/nav-item.js b/app/assets/javascripts/discourse/app/models/nav-item.js
index e269c7f37b1..8a08510e87e 100644
--- a/app/assets/javascripts/discourse/app/models/nav-item.js
+++ b/app/assets/javascripts/discourse/app/models/nav-item.js
@@ -325,9 +325,9 @@ export default class NavItem extends EmberObject {
   }
 }
 
-class ExtraNavItem extends NavItem {
+export class ExtraNavItem extends NavItem {
   @tracked href;
-  count = 0;
+  @tracked count = 0;
   customFilter = null;
 }
 
diff --git a/app/assets/javascripts/discourse/tests/unit/models/extra-nav-item-test.js b/app/assets/javascripts/discourse/tests/unit/models/extra-nav-item-test.js
new file mode 100644
index 00000000000..1127b95cd3b
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/unit/models/extra-nav-item-test.js
@@ -0,0 +1,25 @@
+import { setupTest } from "ember-qunit";
+import { module, test } from "qunit";
+import { ExtraNavItem } from "discourse/models/nav-item";
+
+module("Unit | Model | extra-nav-item", function (hooks) {
+  setupTest(hooks);
+
+  test("displayName updates when count property changes", function (assert) {
+    const extraNavItem = ExtraNavItem.create({
+      name: "something",
+    });
+
+    assert.strictEqual(
+      extraNavItem.displayName,
+      "[en.filters.something.title count=0]"
+    );
+
+    extraNavItem.count = 2;
+
+    assert.strictEqual(
+      extraNavItem.displayName,
+      "[en.filters.something.title_with_count count=2]"
+    );
+  });
+});