Reload after delete section to fix id mismatched

app/assets/javascripts/vue/settings.js

@@ -9,6 +9,7 @@
       el: el,
       data: {
         loaded: false,
+        loading: false,
         sections: {
           sources: [],
           matches: []
@@ -77,7 +78,7 @@
                   id: this.id
                 }
               }).then(function(){
-                self.$destroy();
+                self.$parent.update();
               });
             }
           }
@@ -85,6 +86,7 @@
       },
       methods: {
         update: function() {
+          this.loading = true;
           var self = this;
           $.getJSON("/api/settings", function(data){
             var sources = [];
@@ -99,6 +101,9 @@
             self.sections.sources = sources;
             self.sections.matches = matches;
             self.loaded = true;
+            setTimeout(function(){
+              self.loading = false;
+            }, 500);
           });
         }
       }

app/views/fluentd/settings/source_and_output.html.haml

@@ -49,7 +49,10 @@
 = render "shared/vue/setting"
 
 #vue-setting.current-settings
-  %h2= t('.current')
+  %h2
+    = t('.current')
+    %span{"v-on" => "click: update", "v-if" => "!loading"}= icon('fa-refresh')
+    %span{"v-if" => "loading"}= icon('fa-spin fa-refresh')
   .row
     .col-xs-6.input
       %h3= t('.in')