diff --git a/ui/app/mixins/with-watchers.js b/ui/app/mixins/with-watchers.js
new file mode 100644
index 000000000..c486e01ff
--- /dev/null
+++ b/ui/app/mixins/with-watchers.js
@@ -0,0 +1,16 @@
+import Mixin from '@ember/object/mixin';
+import { computed } from '@ember/object';
+import { assert } from '@ember/debug';
+
+export default Mixin.create({
+  watchers: computed(() => []),
+
+  actions: {
+    willTransition() {
+      this.get('watchers').forEach(watcher => {
+        assert('Watchers must be Ember Concurrency Tasks.', !!watcher.cancelAll);
+        watcher.cancelAll();
+      });
+    },
+  },
+});
diff --git a/ui/app/routes/allocations/allocation.js b/ui/app/routes/allocations/allocation.js
index 4d2cbe66c..6f6d8ebae 100644
--- a/ui/app/routes/allocations/allocation.js
+++ b/ui/app/routes/allocations/allocation.js
@@ -1,17 +1,16 @@
 import Route from '@ember/routing/route';
 import WithModelErrorHandling from 'nomad-ui/mixins/with-model-error-handling';
+import { collect } from '@ember/object/computed';
 import { watchRecord } from 'nomad-ui/utils/properties/watch';
+import WithWatchers from 'nomad-ui/mixins/with-watchers';
 
-export default Route.extend(WithModelErrorHandling, {
+export default Route.extend(WithModelErrorHandling, WithWatchers, {
   setupController(controller, model) {
     controller.set('watcher', this.get('watch').perform(model));
     return this._super(...arguments);
   },
 
-  deactivate() {
-    this.get('watch').cancelAll();
-    return this._super(...arguments);
-  },
-
   watch: watchRecord('allocation'),
+
+  watchers: collect('watch'),
 });
diff --git a/ui/app/routes/clients/client.js b/ui/app/routes/clients/client.js
index 326c792fb..25c7ee861 100644
--- a/ui/app/routes/clients/client.js
+++ b/ui/app/routes/clients/client.js
@@ -1,9 +1,11 @@
 import { inject as service } from '@ember/service';
 import Route from '@ember/routing/route';
+import { collect } from '@ember/object/computed';
 import notifyError from 'nomad-ui/utils/notify-error';
 import { watchRecord, watchRelationship } from 'nomad-ui/utils/properties/watch';
+import WithWatchers from 'nomad-ui/mixins/with-watchers';
 
-export default Route.extend({
+export default Route.extend(WithWatchers, {
   store: service(),
 
   model() {
@@ -23,12 +25,8 @@ export default Route.extend({
     return this._super(...arguments);
   },
 
-  deactivate() {
-    this.get('watch').cancelAll();
-    this.get('watchAllocations').cancelAll();
-    return this._super(...arguments);
-  },
-
   watch: watchRecord('node'),
   watchAllocations: watchRelationship('allocations'),
+
+  watchers: collect('watch', 'watchAllocations'),
 });
diff --git a/ui/app/routes/clients/index.js b/ui/app/routes/clients/index.js
index 43f4a2c95..d3493a3e6 100644
--- a/ui/app/routes/clients/index.js
+++ b/ui/app/routes/clients/index.js
@@ -1,16 +1,14 @@
 import Route from '@ember/routing/route';
+import { collect } from '@ember/object/computed';
 import { watchAll } from 'nomad-ui/utils/properties/watch';
+import WithWatchers from 'nomad-ui/mixins/with-watchers';
 
-export default Route.extend({
+export default Route.extend(WithWatchers, {
   setupController(controller) {
     controller.set('watcher', this.get('watch').perform());
     return this._super(...arguments);
   },
 
-  deactivate() {
-    this.get('watch').cancelAll();
-    this._super(...arguments);
-  },
-
   watch: watchAll('node'),
+  watchers: collect('watch'),
 });
diff --git a/ui/app/routes/jobs/index.js b/ui/app/routes/jobs/index.js
index b17a6a38c..1cfaef726 100644
--- a/ui/app/routes/jobs/index.js
+++ b/ui/app/routes/jobs/index.js
@@ -1,18 +1,16 @@
 import Route from '@ember/routing/route';
+import { collect } from '@ember/object/computed';
 import { watchAll } from 'nomad-ui/utils/properties/watch';
+import WithWatchers from 'nomad-ui/mixins/with-watchers';
 
-export default Route.extend({
+export default Route.extend(WithWatchers, {
   setupController(controller) {
     controller.set('modelWatch', this.get('watch').perform());
     return this._super(...arguments);
   },
 
-  deactivate() {
-    this.get('watch').cancelAll();
-    this._super(...arguments);
-  },
-
   watch: watchAll('job'),
+  watchers: collect('watch'),
 
   actions: {
     refreshRoute() {
diff --git a/ui/app/routes/jobs/job/deployments.js b/ui/app/routes/jobs/job/deployments.js
index da7d75569..7bd29c31c 100644
--- a/ui/app/routes/jobs/job/deployments.js
+++ b/ui/app/routes/jobs/job/deployments.js
@@ -1,8 +1,10 @@
 import Route from '@ember/routing/route';
 import RSVP from 'rsvp';
+import { collect } from '@ember/object/computed';
 import { watchRelationship } from 'nomad-ui/utils/properties/watch';
+import WithWatchers from 'nomad-ui/mixins/with-watchers';
 
-export default Route.extend({
+export default Route.extend(WithWatchers, {
   model() {
     const job = this.modelFor('jobs.job');
     return RSVP.all([job.get('deployments'), job.get('versions')]).then(() => job);
@@ -14,12 +16,8 @@ export default Route.extend({
     return this._super(...arguments);
   },
 
-  deactivate() {
-    this.get('watchDeployments').cancelAll();
-    this.get('watchVersions').cancelAll();
-    return this._super(...arguments);
-  },
-
   watchDeployments: watchRelationship('deployments'),
   watchVersions: watchRelationship('versions'),
+
+  watchers: collect('watchDeployments', 'watchVersions'),
 });
diff --git a/ui/app/routes/jobs/job/index.js b/ui/app/routes/jobs/job/index.js
index 49c79167c..aa99a6eb7 100644
--- a/ui/app/routes/jobs/job/index.js
+++ b/ui/app/routes/jobs/job/index.js
@@ -1,8 +1,9 @@
 import Route from '@ember/routing/route';
 import { collect } from '@ember/object/computed';
 import { watchRecord, watchRelationship } from 'nomad-ui/utils/properties/watch';
+import WithWatchers from 'nomad-ui/mixins/with-watchers';
 
-export default Route.extend({
+export default Route.extend(WithWatchers, {
   setupController(controller, model) {
     controller.set('watchers', {
       model: this.get('watch').perform(model),
@@ -14,17 +15,10 @@ export default Route.extend({
     return this._super(...arguments);
   },
 
-  deactivate() {
-    this.get('allWatchers').forEach(watcher => {
-      watcher.cancelAll();
-    });
-    this._super(...arguments);
-  },
-
   watch: watchRecord('job'),
   watchSummary: watchRelationship('summary'),
   watchEvaluations: watchRelationship('evaluations'),
   watchDeployments: watchRelationship('deployments'),
 
-  allWatchers: collect('watch', 'watchSummary', 'watchEvaluations', 'watchDeployments'),
+  watchers: collect('watch', 'watchSummary', 'watchEvaluations', 'watchDeployments'),
 });
diff --git a/ui/app/routes/jobs/job/task-group.js b/ui/app/routes/jobs/job/task-group.js
index bca649f68..53c14b671 100644
--- a/ui/app/routes/jobs/job/task-group.js
+++ b/ui/app/routes/jobs/job/task-group.js
@@ -1,8 +1,9 @@
 import Route from '@ember/routing/route';
 import { collect } from '@ember/object/computed';
 import { watchRecord, watchRelationship } from 'nomad-ui/utils/properties/watch';
+import WithWatchers from 'nomad-ui/mixins/with-watchers';
 
-export default Route.extend({
+export default Route.extend(WithWatchers, {
   model({ name }) {
     // If the job is a partial (from the list request) it won't have task
     // groups. Reload the job to ensure task groups are present.
@@ -28,16 +29,9 @@ export default Route.extend({
     return this._super(...arguments);
   },
 
-  deactivate() {
-    this.get('allWatchers').forEach(watcher => {
-      watcher.cancelAll();
-    });
-    return this._super(...arguments);
-  },
-
   watchJob: watchRecord('job'),
   watchSummary: watchRelationship('summary'),
   watchAllocations: watchRelationship('allocations'),
 
-  allWatchers: collect('watchJob', 'watchSummary', 'watchAllocations'),
+  watchers: collect('watchJob', 'watchSummary', 'watchAllocations'),
 });
diff --git a/ui/app/routes/jobs/job/versions.js b/ui/app/routes/jobs/job/versions.js
index bd621f64a..154476990 100644
--- a/ui/app/routes/jobs/job/versions.js
+++ b/ui/app/routes/jobs/job/versions.js
@@ -1,7 +1,9 @@
 import Route from '@ember/routing/route';
+import { collect } from '@ember/object/computed';
 import { watchRelationship } from 'nomad-ui/utils/properties/watch';
+import WithWatchers from 'nomad-ui/mixins/with-watchers';
 
-export default Route.extend({
+export default Route.extend(WithWatchers, {
   model() {
     const job = this.modelFor('jobs.job');
     return job.get('versions').then(() => job);
@@ -12,10 +14,6 @@ export default Route.extend({
     return this._super(...arguments);
   },
 
-  deactivate() {
-    this.get('watchVersions').cancelAll();
-    return this._super(...arguments);
-  },
-
   watchVersions: watchRelationship('versions'),
+  watchers: collect('watchVersions'),
 });