diff --git a/ui-v2/app/components/child-selector/index.js b/ui-v2/app/components/child-selector/index.js
index b3b498b979..54f1837c26 100644
--- a/ui-v2/app/components/child-selector/index.js
+++ b/ui-v2/app/components/child-selector/index.js
@@ -3,10 +3,9 @@ import { get, set, computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 
-import SlotsMixin from 'block-slots';
-import WithListeners from 'consul-ui/mixins/with-listeners';
+import Slotted from 'block-slots';
 
-export default Component.extend(SlotsMixin, WithListeners, {
+export default Component.extend(Slotted, {
   onchange: function() {},
   tagName: '',
 
@@ -23,10 +22,15 @@ export default Component.extend(SlotsMixin, WithListeners, {
 
   init: function() {
     this._super(...arguments);
+    this._listeners = this.dom.listeners();
     this.searchable = this.container.searchable(this.type);
     this.form = this.formContainer.form(this.type);
     this.form.clear({ Datacenter: this.dc, Namespace: this.nspace });
   },
+  willDestroyElement: function() {
+    this._super(...arguments);
+    this._listeners.remove();
+  },
   options: computed('selectedOptions.[]', 'allOptions.[]', function() {
     // It's not massively important here that we are defaulting `items` and
     // losing reference as its just to figure out the diff
@@ -44,9 +48,11 @@ export default Component.extend(SlotsMixin, WithListeners, {
       // TODO: make sure we can either search before things are loaded
       // or wait until we are loaded, guess power select take care of that
       return new Promise(resolve => {
-        const remove = this.listen(this.searchable, 'change', function(e) {
-          remove();
-          resolve(e.target.data);
+        const remove = this._listeners.add(this.searchable, {
+          change: e => {
+            remove();
+            resolve(e.target.data);
+          },
         });
         this.searchable.search(term);
       });
@@ -64,7 +70,7 @@ export default Component.extend(SlotsMixin, WithListeners, {
       // need to be sure that its saved before adding/closing the modal for now
       // and we don't open the modal on prop change yet
       item = repo.persist(item);
-      this.listen(item, {
+      this._listeners.add(item, {
         message: e => {
           this.actions.change.apply(this, [
             {
diff --git a/ui-v2/app/components/form-component/index.js b/ui-v2/app/components/form-component/index.js
index 520cb2148e..ef1c0dc170 100644
--- a/ui-v2/app/components/form-component/index.js
+++ b/ui-v2/app/components/form-component/index.js
@@ -1,11 +1,10 @@
 import Component from '@ember/component';
-import SlotsMixin from 'block-slots';
+import Slotted from 'block-slots';
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
-import WithListeners from 'consul-ui/mixins/with-listeners';
 // match anything that isn't a [ or ] into multiple groups
 const propRe = /([^[\]])+/g;
-export default Component.extend(WithListeners, SlotsMixin, {
+export default Component.extend(Slotted, {
   tagName: '',
   onreset: function() {},
   onchange: function() {},
diff --git a/ui-v2/app/components/policy-selector/index.js b/ui-v2/app/components/policy-selector/index.js
index 52c17dc4dc..04b62f1d68 100644
--- a/ui-v2/app/components/policy-selector/index.js
+++ b/ui-v2/app/components/policy-selector/index.js
@@ -17,8 +17,8 @@ export default ChildSelectorComponent.extend({
     const source = this.source;
     if (source) {
       const event = 'save';
-      this.listen(source, event, e => {
-        this.actions[event].bind(this)(...e.data);
+      this._listeners.add(source, {
+        save: e => this.actions[event].bind(this)(...e.data),
       });
     }
   },
diff --git a/ui-v2/app/mixins/with-listeners.js b/ui-v2/app/mixins/with-listeners.js
deleted file mode 100644
index f3d09c9d7a..0000000000
--- a/ui-v2/app/mixins/with-listeners.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import Controller from '@ember/controller';
-import Component from '@ember/component';
-import Mixin from '@ember/object/mixin';
-import { inject as service } from '@ember/service';
-
-export default Mixin.create({
-  dom: service('dom'),
-  init: function() {
-    this._super(...arguments);
-    this._listeners = this.dom.listeners();
-    let teardown = ['willDestroy'];
-    if (this instanceof Component) {
-      teardown = ['willDestroyElement'];
-    } else if (this instanceof Controller) {
-      if (typeof this.reset === 'function') {
-        teardown.push('reset');
-      }
-    }
-    teardown.forEach(method => {
-      const destroy = this[method];
-      this[method] = function() {
-        if (typeof destroy === 'function') {
-          destroy.apply(this, arguments);
-        }
-        this.removeListeners();
-      };
-    });
-  },
-  listen: function(target, event, handler) {
-    return this._listeners.add(...arguments);
-  },
-  removeListeners: function() {
-    return this._listeners.remove(...arguments);
-  },
-});
diff --git a/ui-v2/tests/unit/mixins/with-listeners-test.js b/ui-v2/tests/unit/mixins/with-listeners-test.js
deleted file mode 100644
index d62dfce06b..0000000000
--- a/ui-v2/tests/unit/mixins/with-listeners-test.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { module } from 'qunit';
-import { setupTest } from 'ember-qunit';
-import test from 'ember-sinon-qunit/test-support/test';
-import Controller from '@ember/controller';
-import Mixin from 'consul-ui/mixins/with-listeners';
-
-module('Unit | Mixin | with listeners', function(hooks) {
-  setupTest(hooks);
-
-  hooks.beforeEach(function() {
-    this.subject = function() {
-      const MixedIn = Controller.extend(Mixin);
-      this.owner.register('test-container:with-listeners-object', MixedIn);
-      return this.owner.lookup('test-container:with-listeners-object');
-    };
-  });
-
-  // Replace this with your real tests.
-  test('it works', function(assert) {
-    const subject = this.subject();
-    assert.ok(subject);
-  });
-});