diff --git a/app/assets/javascripts/discourse/mixins/add-archetype-class.js.es6 b/app/assets/javascripts/discourse/mixins/add-archetype-class.js.es6
index e1b710746..83889422f 100644
--- a/app/assets/javascripts/discourse/mixins/add-archetype-class.js.es6
+++ b/app/assets/javascripts/discourse/mixins/add-archetype-class.js.es6
@@ -1,21 +1,26 @@
+import { on, observes } from 'ember-addons/ember-computed-decorators';
+
 // Mix this in to a view that has a `archetype` property to automatically
 // add it to the body as the view is entered / left / model is changed.
 // This is used for keeping the `body` style in sync for the background image.
 export default {
-  _init: function() { this.get('archetype'); }.on('init'),
-
   _cleanUp() {
     $('body').removeClass((_, css) => (css.match(/\barchetype-\S+/g) || []).join(' '));
   },
 
-  _archetypeChanged: function() {
+  @observes('archetype')
+  @on('init')
+  _archetypeChanged() {
     const archetype = this.get('archetype');
     this._cleanUp();
 
     if (archetype) {
       $('body').addClass('archetype-' + archetype);
     }
-  }.observes('archetype'),
+  },
 
-  _willDestroyElement: function() { this._cleanUp(); }.on('willDestroyElement')
+  willDestroyElement() {
+    this._super();
+    this._cleanUp();
+  }
 };