diff --git a/app/assets/javascripts/vue/fluent_log.js b/app/assets/javascripts/vue/fluent_log.js
deleted file mode 100644
index d3e96eb..0000000
--- a/app/assets/javascripts/vue/fluent_log.js
+++ /dev/null
@@ -1,64 +0,0 @@
-(function(){
-  "use strict";
-
-  $(function(){
-    if($('#fluent-log').length === 0) return;
-
-    new Vue({
-      el: "#fluent-log",
-      paramAttributes: ["logUrl", "initialAutoReload"],
-      data: {
-        "autoFetch": false,
-        "logs": [],
-        "limit": 30,
-        "processing": false
-      },
-
-      compiled: function(){
-        this.fetchLogs();
-
-        var self = this;
-        var timer;
-        this.$watch("autoFetch", function(newValue){
-          if(newValue === true) {
-            timer = setInterval(function(){
-              self.fetchLogs();
-              var $log = $(".log", self.$el);
-              $log.scrollTop($log.innerHeight());
-            }, 1000);
-          } else {
-            clearInterval(timer);
-          }
-        });
-        if(this.initialAutoReload) {
-          this.autoFetch = true;
-        }
-      },
-
-      computed: {
-        isPresentedLogs: function(){
-          return this.logs.length > 0;
-        }
-      },
-
-      methods: {
-        fetchLogs: function() {
-          if(this.processing) return;
-          this.processing = true;
-          var self = this;
-          new Promise(function(resolve, reject) {
-            $.getJSON(self.logUrl + "?limit=" + self.limit, resolve).fail(reject);
-          }).then(function(logs){
-            self.logs = logs;
-            setTimeout(function(){
-              self.processing = false;
-            }, 256); // delay to reduce flicking loading icon
-          })["catch"](function(error){
-            self.processing = false;
-          });
-        }
-      }
-    });
-  });
-})();
-
diff --git a/app/javascript/packs/fluent_log.js b/app/javascript/packs/fluent_log.js
new file mode 100644
index 0000000..2e959cb
--- /dev/null
+++ b/app/javascript/packs/fluent_log.js
@@ -0,0 +1,58 @@
+'use strict';
+$(document).ready(()=> {
+  new Vue({
+    el: "#fluent-log",
+    paramAttributes: ["logUrl", "initialAutoReload"],
+    data: {
+      "autoFetch": false,
+      "logs": [],
+      "limit": 30,
+      "processing": false
+    },
+
+    compiled: function(){
+      this.fetchLogs();
+
+      var self = this;
+      var timer;
+      this.$watch("autoFetch", function(newValue){
+        if(newValue === true) {
+          timer = setInterval(function(){
+            self.fetchLogs();
+            var $log = $(".log", self.$el);
+            $log.scrollTop($log.innerHeight());
+          }, 1000);
+        } else {
+          clearInterval(timer);
+        }
+      });
+      if(this.initialAutoReload) {
+        this.autoFetch = true;
+      }
+    },
+
+    computed: {
+      isPresentedLogs: function(){
+        return this.logs.length > 0;
+      }
+    },
+
+    methods: {
+      fetchLogs: function() {
+        if(this.processing) return;
+        this.processing = true;
+        var self = this;
+        new Promise(function(resolve, reject) {
+          $.getJSON(self.logUrl + "?limit=" + self.limit, resolve).fail(reject);
+        }).then(function(logs){
+          self.logs = logs;
+          setTimeout(function(){
+            self.processing = false;
+          }, 256); // delay to reduce flicking loading icon
+        })["catch"](function(error){
+          self.processing = false;
+        });
+      }
+    }
+  });
+});
diff --git a/app/views/shared/vue/_fluent_log.html.erb b/app/views/shared/vue/_fluent_log.html.erb
index 963274b..b75afd5 100644
--- a/app/views/shared/vue/_fluent_log.html.erb
+++ b/app/views/shared/vue/_fluent_log.html.erb
@@ -1,11 +1,12 @@
+<%- add_javascript_pack_tag("fluent_log") %>
 <!-- vue.js -->
 <% auto_reload ||= true %>
 <div id="fluent-log" logUrl="<%= log_tail_daemon_agent_path(fluentd) %>" initialAutoReload="<%= auto_reload ? "true" : "" %>">
   <div class="bottom-margin form-inline">
-    <button class="btn btn-primary" v-on="click: fetchLogs">
+    <button class="btn btn-primary" v-on:click="fetchLogs">
       <%= t "terms.reload_log" %>
     </button>
-    <input type="text" v-model="limit" size="4" v-on="keyup: fetchLogs | key enter" class="form-control"/>
+    <input type="text" v-model="limit" size="4" v-on:keyup="fetchLogs | key enter" class="form-control"/>
     <%= t('terms.lines') %>
     <label>
       <input type="checkbox" v-model="autoFetch" /> <%= t "terms.auto_reload", seconds: 1 %>
@@ -14,7 +15,7 @@
   </div>
 
 <pre v-if="isPresentedLogs"><!-- be careful indent -->
-<div class="log"><span v-repeat="logs">{{ $value }}
+<div class="log"><span v-for="log in logs">{{ log }}
 </span></div></pre>
 
   <div v-if="!isPresentedLogs && !processing">
@@ -22,4 +23,3 @@
   </div>
 </div>
 <!-- /vue.js -->
-