diff --git a/app/assets/javascripts/vue/treeview.js b/app/assets/javascripts/vue/treeview.js
deleted file mode 100644
index 2786964..0000000
--- a/app/assets/javascripts/vue/treeview.js
+++ /dev/null
@@ -1,97 +0,0 @@
-(function(){
-  "use strict";
-
-  $(function(){
-    if($('#treeview').length === 0) return;
-
-    new Vue({
-      el: "#treeview",
-      paramAttributes: ["initialPath"],
-      data: {
-        preview: "",
-        path: "",
-        paths: []
-      },
-
-      compiled: function(){
-        this.path = this.initialPath;
-        this.fetchTree();
-        this.$watch("path", this.fetchTree);
-        this.$watch("path", this.fetchPreview);
-      },
-
-      computed: {
-        selected: function(){
-          var self = this;
-          return _.find(this.paths, function(path){
-            return self.path == path.path;
-          });
-        },
-        selectedIsDir: function() {
-          if(!this.selected) return true;
-          return this.selected.is_dir;
-        },
-        currentDirs: function() {
-          if(this.path === "/") {
-            return ["/"];
-          }
-
-          var path = this.path;
-          if(this.selected && !this.selected.is_dir) {
-            path = path.replace(/\/[^/]+$/, "");
-          }
-          var root = "/";
-          var dirs = [];
-          path.split("/").forEach(function(dir) {
-            dirs.push(root + dir);
-            if(dir) {
-              root = root + dir + "/";
-            }
-          });
-          return dirs;
-        }
-      },
-
-      methods: {
-        isAncestor: function(target) {
-          return this.path.indexOf(target) === 0;
-        },
-        basename: function(path) {
-          if (path === "/") return "/";
-          return path.match(/[^/]+$/)[0];
-        },
-        fetchTree: function() {
-          var self = this;
-          return new Promise(function(resolve, reject) {
-            $.getJSON("/api/tree?path=" + self.path, resolve).fail(reject);
-          }).then(function(paths){
-            self.paths = paths;
-          });
-        },
-        fetchPreview: function(){
-          if(!this.selected) return ;
-          var self = this;
-          this.preview = "";
-          new Promise(function(resolve, reject) {
-            $.getJSON("/api/file_preview?file=" + self.selected.path, resolve).fail(reject);
-          }).catch(function(e){
-            console.error(e);
-          }).then(function(lines){
-            self.preview = lines.join("\n");
-          });
-        },
-
-        selectPath: function(path){
-          this.path = path;
-        },
-        isSuffixRequired: function(data){
-          return data.is_dir && data.path != "/";
-        },
-        isSelected: function(path){
-          return this.path == path;
-        }
-      }
-    });
-  });
-})();
-
diff --git a/app/javascript/packs/treeview.js b/app/javascript/packs/treeview.js
new file mode 100644
index 0000000..bae4aed
--- /dev/null
+++ b/app/javascript/packs/treeview.js
@@ -0,0 +1,99 @@
+'use strict';
+import 'lodash/lodash';
+$(document).ready(() => {
+  new Vue({
+    el: "#treeview",
+    props: {
+      initialPath: {
+        default: "/var/log",
+        type: String
+      }
+    },
+    data: {
+      preview: "",
+      path: "",
+      paths: []
+    },
+
+    mounted: function(){
+      console.log(this.initialPath);
+      this.path = this.initialPath;
+      this.fetchTree();
+      this.$watch("path", this.fetchTree);
+      this.$watch("path", this.fetchPreview);
+    },
+
+    computed: {
+      selected: function(){
+        var self = this;
+        return _.find(this.paths, function(path){
+          return self.path == path.path;
+        });
+      },
+      selectedIsDir: function() {
+        if(!this.selected) return true;
+        return this.selected.is_dir;
+      },
+      currentDirs: function() {
+        if(this.path === "/") {
+          return ["/"];
+        }
+
+        var path = this.path;
+        if(this.selected && !this.selected.is_dir) {
+          path = path.replace(/\/[^/]+$/, "");
+        }
+        var root = "/";
+        var dirs = [];
+        path.split("/").forEach(function(dir) {
+          dirs.push(root + dir);
+          if(dir) {
+            root = root + dir + "/";
+          }
+        });
+        return dirs;
+      }
+    },
+
+    methods: {
+      isAncestor: function(target) {
+        return this.path.indexOf(target) === 0;
+      },
+      basename: function(path) {
+        if (path === "/") return "/";
+        return path.match(/[^/]+$/)[0];
+      },
+      fetchTree: function() {
+        var self = this;
+        return new Promise(function(resolve, reject) {
+          $.getJSON("/api/tree?path=" + self.path, resolve).fail(reject);
+        }).then(function(paths){
+          console.log(paths);
+          self.paths = paths;
+        });
+      },
+      fetchPreview: function(){
+        if(!this.selected) return ;
+        var self = this;
+        this.preview = "";
+        new Promise(function(resolve, reject) {
+          $.getJSON("/api/file_preview?file=" + self.selected.path, resolve).fail(reject);
+        }).catch(function(e){
+          console.error(e);
+        }).then(function(lines){
+          self.preview = lines.join("\n");
+        });
+      },
+
+      selectPath: function(path){
+        this.path = path;
+      },
+      isSuffixRequired: function(data){
+        return data.is_dir && data.path != "/";
+      },
+      isSelected: function(path){
+        return this.path == path;
+      }
+    }
+  });
+});
diff --git a/app/views/shared/vue/_treeview.html.erb b/app/views/shared/vue/_treeview.html.erb
index 4720a2e..32adb78 100644
--- a/app/views/shared/vue/_treeview.html.erb
+++ b/app/views/shared/vue/_treeview.html.erb
@@ -1,30 +1,31 @@
+<% add_javascript_pack_tag("treeview") %>
 <% name ||= "" %>
 <% action ||= "" %>
 <% submit_button ||= "" %>
 <%= form_tag(action, method: :post) do %>
-  <div id="treeview" initialPath="/var/log">
-    <pre>{{ path }}</pre>
+  <div id="treeview">
+    <pre class="card-body">{{ path }}</pre>
     <input type="hidden" name="<%= name %>" v-model="path" />
     <div class="dirs">
-      <span v-repeat="currentDirs">
-        <span v-if="$index > 0">
+      <span v-for="(dir, index) in currentDirs">
+        <span v-if="index > 0">
           <%= icon('fa-caret-right') %>
         </span>
-        <span v-on="click: selectPath($value)" class="dir">{{ basename($value) }}</span>
+        <span v-on:click="selectPath(dir)" class="dir">{{ basename(dir) }}</span>
      </span>
    </div>
    <div class="tree">
-     <span v-on="click: selectPath(path)" class="vue-path" v-class="selected: isSelected(path)" v-repeat="paths">
-       <span v-if="is_dir"><%= icon("fa-folder") %></span>
-       <span v-if="!is_dir"><%= icon("fa-file-o") %></span>
-       {{ basename(path) }}
+     <span v-on:click="selectPath(value.path)" class="vue-path" v-bind:class="{ selected: isSelected(value.path) }" v-for="value in paths">
+       <span v-if="value.is_dir"><%= icon("fa-folder") %></span>
+       <span v-if="!value.is_dir"><%= icon("fa-file-o") %></span>
+       {{ basename(value.path) }}
        <br />
      </span>
    </div>
 
    <pre v-if="preview" class="preview">{{ preview }}</pre>
    <p>
-     <%= submit_tag submit_button, class: "btn btn-lg btn-primary pull-right", "v-attr" => "disabled: selectedIsDir", "v-class" => "btn-disable: selectedIsDir" %>
+     <%= submit_tag submit_button, class: "btn btn-lg btn-primary pull-right", "v-bind:disabled" => "selectedIsDir" %>
    </p>
   </div>
 <% end %>