diff --git a/app/assets/javascripts/vue/settings.js b/app/assets/javascripts/vue/settings.js
deleted file mode 100644
index 64f685a..0000000
--- a/app/assets/javascripts/vue/settings.js
+++ /dev/null
@@ -1,121 +0,0 @@
-;(function(){
-  "use strict";
-
-  $(function(){
-    var el = document.querySelector("#vue-setting");
-    if(!el) return;
-
-    new Vue({
-      el: el,
-      data: function(){
-        return {
-          loaded: false,
-          loading: false,
-          sections: {
-            sources: [],
-            matches: []
-          }
-        };
-      },
-      ready: function() {
-        this.update();
-      },
-      components: {
-        section: {
-          inherit: true,
-          template: "#vue-setting-section",
-          data: function(){
-            return {
-              mode: "default",
-              processing: false,
-              editContent: null
-            };
-          },
-          created: function(){
-            this.initialState();
-          },
-          computed: {
-            endpoint: function(){
-              return "/api/settings/" + this.id;
-            }
-          },
-          methods: {
-            onCancel: function(ev) {
-              this.initialState();
-            },
-            onEdit: function(ev) {
-              this.mode = "edit";
-            },
-            onDelete: function(ev) {
-              if(!confirm("really?")) return;
-              this.destroy();
-            },
-            onSubmit: function(ev) {
-              this.processing = true;
-              var self = this;
-              $.ajax({
-                url: this.endpoint,
-                method: "POST",
-                data: {
-                  _method: "PATCH",
-                  id: this.id,
-                  content: this.editContent
-                }
-              }).then(function(data){
-                // NOTE: self.$data = data doesn't work as well, so using _.each
-                //       whole $data swapping breaks mode switching..
-                _.each(data, function(v,k){
-                  self[k] = v;
-                });
-                self.initialState();
-              }).always(function(){
-                self.processing = false;
-              });
-            },
-            initialState: function(){
-              this.$set('processing', false);
-              this.$set('mode', 'default');
-              this.$set('editContent', this.content);
-            },
-            destroy: function(){
-              var self = this;
-              $.ajax({
-                url: this.endpoint,
-                method: "POST",
-                data: {
-                  _method: "DELETE",
-                  id: this.id
-                }
-              }).then(function(){
-                self.$parent.update();
-              });
-            }
-          }
-        }
-      },
-      methods: {
-        update: function() {
-          this.loading = true;
-          var self = this;
-          $.getJSON("/api/settings", function(data){
-            var sources = [];
-            var matches = [];
-            data.forEach(function(v){
-              if(v.name === "source"){
-                sources.push(v);
-              }else{
-                matches.push(v);
-              }
-            });
-            self.sections.sources = sources;
-            self.sections.matches = matches;
-            self.loaded = true;
-            setTimeout(function(){
-              self.loading = false;
-            }, 500);
-          });
-        }
-      }
-    });
-  });
-})();
diff --git a/app/javascript/packs/settings.js b/app/javascript/packs/settings.js
new file mode 100644
index 0000000..120b3ad
--- /dev/null
+++ b/app/javascript/packs/settings.js
@@ -0,0 +1,114 @@
+$(document).ready(() => {
+  new Vue({
+    el: "#vue-setting",
+    data: function(){
+      return {
+        loaded: false,
+        loading: false,
+        sections: {
+          sources: [],
+          matches: []
+        }
+      };
+    },
+    ready: function() {
+      this.update();
+    },
+    components: {
+      configSection: {
+        inherit: true,
+        template: "#vue-setting-section",
+        data: function(){
+          return {
+            mode: "default",
+            processing: false,
+            editContent: null
+          };
+        },
+        created: function(){
+          this.initialState();
+        },
+        computed: {
+          endpoint: function(){
+            return "/api/settings/" + this.id;
+          }
+        },
+        methods: {
+          onCancel: function(ev) {
+            this.initialState();
+          },
+          onEdit: function(ev) {
+            this.mode = "edit";
+          },
+          onDelete: function(ev) {
+            if(!confirm("really?")) return;
+            this.destroy();
+          },
+          onSubmit: function(ev) {
+            this.processing = true;
+            var self = this;
+            $.ajax({
+              url: this.endpoint,
+              method: "POST",
+              data: {
+                _method: "PATCH",
+                id: this.id,
+                content: this.editContent
+              }
+            }).then(function(data){
+              // NOTE: self.$data = data doesn't work as well, so using _.each
+              //       whole $data swapping breaks mode switching..
+              _.each(data, function(v,k){
+                self[k] = v;
+              });
+              self.initialState();
+            }).always(function(){
+              self.processing = false;
+            });
+          },
+          initialState: function(){
+            this.$set('processing', false);
+            this.$set('mode', 'default');
+            this.$set('editContent', this.content);
+          },
+          destroy: function(){
+            var self = this;
+            $.ajax({
+              url: this.endpoint,
+              method: "POST",
+              data: {
+                _method: "DELETE",
+                id: this.id
+              }
+            }).then(function(){
+              self.$parent.update();
+            });
+          }
+        }
+      }
+    },
+    methods: {
+      update: function() {
+        this.loading = true;
+        var self = this;
+        $.getJSON("/api/settings", function(data){
+          var sources = [];
+          var matches = [];
+          data.forEach(function(v){
+            if(v.name === "source"){
+              sources.push(v);
+            }else{
+              matches.push(v);
+            }
+          });
+          self.sections.sources = sources;
+          self.sections.matches = matches;
+          self.loaded = true;
+          setTimeout(function(){
+            self.loading = false;
+          }, 500);
+        });
+      }
+    }
+  });
+})