diff --git a/app/assets/javascripts/vue/notification.js b/app/assets/javascripts/vue/notification.js
deleted file mode 100644
index 04aa6ae..0000000
--- a/app/assets/javascripts/vue/notification.js
+++ /dev/null
@@ -1,65 +0,0 @@
-(function(){
-  "use strict";
-  var POLLING_INTERVAL = 3 * 1000;
-  var POLLING_URL = "/polling/alerts";
-
-  $(function(){
-    if($('#vue-notification').length === 0) return;
-
-    var alert = new Vue({
-      el: "#vue-notification",
-      data: {
-        "alerts": []
-      },
-
-      created: function(){
-        var timer;
-        var self = this;
-        var currentInterval = POLLING_INTERVAL;
-        var fetch = function(){
-          self.fetchAlertsData().then(function(alerts){
-            if(self.alerts.toString() == alerts.toString()) {
-              currentInterval *= 1.1;
-            } else {
-              currentInterval = POLLING_INTERVAL;
-            }
-            self.alerts = alerts;
-            timer = setTimeout(fetch, currentInterval);
-          })["catch"](function(xhr){
-            if(xhr.status === 401) {
-              // signed out
-            }
-            if(xhr.status === 0) {
-              // server unreachable (maybe down)
-            }
-          });
-        };
-        window.addEventListener('focus', function(ev){
-          currentInterval = POLLING_INTERVAL;
-          timer = setTimeout(fetch, currentInterval);
-        }, false);
-        window.addEventListener('blur', function(ev){
-          clearTimeout(timer);
-        }, false);
-        fetch();
-      },
-
-      computed: {
-        alertsCount: {
-          get: function(){ return this.alerts.length; }
-        },
-        hasAlerts: {
-          get: function(){ return this.alertsCount > 0; }
-        }
-      },
-
-      methods: {
-        fetchAlertsData: function() {
-          return new Promise(function(resolve, reject) {
-            $.getJSON(POLLING_URL, resolve).fail(reject);
-          });
-        }
-      }
-    });
-  });
-})();
diff --git a/app/javascript/packs/notification.js b/app/javascript/packs/notification.js
new file mode 100644
index 0000000..a37ba3b
--- /dev/null
+++ b/app/javascript/packs/notification.js
@@ -0,0 +1,62 @@
+import Vue from 'vue/dist/vue.esm'
+
+const POLLING_INTERVAL = 3 * 1000
+const POLLING_URL = "/polling/alerts"
+
+$(document).ready(()=> {
+  let alert = new Vue({
+    el: "#vue-notification",
+    data: {
+      "alerts": []
+    },
+
+    created: function(){
+      let timer;
+      let self = this;
+      let currentInterval = POLLING_INTERVAL;
+      let fetch = function(){
+        self.fetchAlertsData().then(function(alerts){
+          if(self.alerts.toString() == alerts.toString()) {
+            currentInterval *= 1.1;
+          } else {
+            currentInterval = POLLING_INTERVAL;
+          }
+          self.alerts = alerts;
+          timer = setTimeout(fetch, currentInterval);
+        })["catch"](function(xhr){
+          if(xhr.status === 401) {
+            // signed out
+          }
+          if(xhr.status === 0) {
+            // server unreachable (maybe down)
+          }
+        });
+      };
+      window.addEventListener('focus', function(ev){
+        currentInterval = POLLING_INTERVAL;
+        timer = setTimeout(fetch, currentInterval);
+      }, false);
+      window.addEventListener('blur', function(ev){
+        clearTimeout(timer);
+      }, false);
+      fetch();
+    },
+
+    computed: {
+      alertsCount: {
+        get: function(){ return this.alerts.length; }
+      },
+      hasAlerts: {
+        get: function(){ return this.alertsCount > 0; }
+      }
+    },
+
+    methods: {
+      fetchAlertsData: function() {
+        return new Promise(function(resolve, reject) {
+          $.getJSON(POLLING_URL, resolve).fail(reject);
+        });
+      }
+    }
+  });
+});
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index cc60bea..eabca84 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -14,6 +14,7 @@
     <%-# stylesheet_pack_tag 'application', media: 'all'%>
     <%= javascript_include_tag 'application' %>
     <%= javascript_pack_tag 'application' %>
+    <%= javascript_pack_tag 'notification' %>
     <%= csrf_meta_tags %>
   </head>
   <body class="fixed-nav bg-light">
diff --git a/app/views/shared/vue/_notification.html.erb b/app/views/shared/vue/_notification.html.erb
index 280846b..d3a475d 100644
--- a/app/views/shared/vue/_notification.html.erb
+++ b/app/views/shared/vue/_notification.html.erb
@@ -13,11 +13,11 @@
         </div>
       </a>
     </li>
-    <li v-repeat="alerts">
+    <li v-for="alert in alerts">
       <a>
         <div>
           <%= icon("fa-cog fa-fw fa-lg fa-spin") %>
-          {{ text }}
+          {{ alert }}
         </div>
       </a>
     </li>