Properly break up component definition and instantiation.

app/assets/javascripts/issuable_time_tracker.js.es6

 //= vue
-//= smart_interval
-//= subbable_resource
-
-function getRandomInt(min, max) {
- const justReturnZero = Math.random > .9;
- return justReturnZero ? 0 : Math.floor(Math.random() * (max - min + 1)) + min;
-}
 
 ((global) => {
-  $(() => {
-    /* This Vue instance represents what will become the parent instance for the
-      * sidebar. It will be responsible for managing `issuable` state and propagating
-      * changes to sidebar components.
-     */
-    const issuableData = JSON.parse(document.getElementById('issuable-time-tracker').getAttribute('issuable'));
-    issuableData.time_spent = issuableData.time_estimate - 1000;
-
-    new Vue({
-      el: '#issuable-time-tracker',
-      data: {
-        issuable: issuableData,
-      },
-      methods: {
-        fetchIssuable() {
-           return gl.IssuableResource.get.call(gl.IssuableResource, { type: 'GET', url: gl.IssuableResource.endpoint });
-        },
-        initPolling() {
-          new gl.SmartInterval({
-            callback: this.fetchIssuable,
-            startingInterval: 4000,
-            maxInterval: 10000,
-            incrementByFactorOf: 2,
-            lazyStart: false,
-          });
-        },
-        updateState(data) {
-          /* MOCK */
-          data.time_estimate = getRandomInt(0, 10000)
-          data.time_spent = getRandomInt(0, 10000);
-
-          this.issuable = data;
-        },
-      },
-      beforeCreate() {
-        this.issuable = issuableData;
-      },
-      created() {
-        this.fetchIssuable();
-      },
-      mounted() {
-        gl.IssuableResource.subscribe(data => this.updateState(data));
-        this.initPolling();
-
-        $(document).on('ajax:success', '.gfm-form', (e) => {
-          // TODO: check if slash command was updated.
-          this.fetchIssuable();
-        });
-      }
-    });
-  });
-
-gl.IssuableTimeTracker = Vue.component('issuable-time-tracker', {
+  gl.IssuableTimeTracker = Vue.component('issuable-time-tracker', {
     name: 'issuable-time-tracker',
     props: [ 'time_estimate', 'time_spent' ],
     data: function() {
@@ -236,4 +177,4 @@ gl.IssuableTimeTracker = Vue.component('issuable-time-tracker', {
         </div>
     `,
   });
-}) (window.gl || (window.gl = {}));
+})(window.gl || (window.gl = {}));

app/assets/javascripts/time_tracking_display.js.es6

+//= require vue
+//= issuable_time_tracker
+//= smart_interval
+//= subbable_resource
+
+function getRandomInt(min, max) {
+ const justReturnZero = Math.random > .9;
+ return justReturnZero ? 0 : Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+((global) => {
+  /* This Vue instance represents what will become the parent instance for the
+    * sidebar. It will be responsible for managing `issuable` state and propagating
+    * changes to sidebar components.
+   */
+
+  class IssuableTimeTracking {
+    constructor(issuableJSON) {
+      const parsedIssuable = JSON.parse(issuableJSON);
+      return this.initComponent(parsedIssuable);
+    }
+
+    initComponent(parsedIssuable) {
+      return new Vue({
+        el: '#issuable-time-tracker',
+        data: {
+          issuable: parsedIssuable,
+        },
+        methods: {
+          fetchIssuable() {
+             return gl.IssuableResource.get.call(gl.IssuableResource, { type: 'GET', url: gl.IssuableResource.endpoint });
+          },
+          initPolling() {
+            new gl.SmartInterval({
+              callback: this.fetchIssuable,
+              startingInterval: 4000,
+              maxInterval: 10000,
+              incrementByFactorOf: 2,
+              lazyStart: false,
+            });
+          },
+          updateState(data) {
+            /* MOCK */
+            data.time_estimate = getRandomInt(0, 10000)
+            data.time_spent = getRandomInt(0, 10000);
+
+            this.issuable = data;
+          },
+        },
+        created() {
+          this.fetchIssuable();
+        },
+        mounted() {
+          gl.IssuableResource.subscribe(data => this.updateState(data));
+          this.initPolling();
+
+          $(document).on('ajax:success', '.gfm-form', (e) => {
+            // TODO: check if slash command was updated.
+            this.fetchIssuable();
+          });
+        }
+      });
+    }
+  }
+
+  gl.IssuableTimeTracking = IssuableTimeTracking;
+})(window.gl || (window.gl = {}));

app/views/shared/issuable/_sidebar.html.haml

@@ -199,6 +199,7 @@
 
     :javascript
       gl.IssuableResource = new gl.SubbableResource('#{issuable_json_path(issuable)}');
+      new gl.IssuableTimeTracking('#{issuable.to_json}');
       new MilestoneSelect('{"namespace":"#{@project.namespace.path}","path":"#{@project.path}"}');
       new LabelsSelect();
       new WeightSelect();