diff --git a/app/assets/javascripts/vue/in_tail_format.js b/app/assets/javascripts/vue/in_tail_format.js
index fbfb265..501fed8 100644
--- a/app/assets/javascripts/vue/in_tail_format.js
+++ b/app/assets/javascripts/vue/in_tail_format.js
@@ -6,24 +6,27 @@
 
     new Vue({
       el: "#in_tail_format",
-      paramAttributes: ["formatOptions", "initialSelected", "targetFile"],
+      paramAttributes: ["formatOptions", "initialSelected", "targetFile", "paramsJson"],
       data: {
-        // v-model: format
         regexp: "",
         grok_str: "",
-        previewProcessing: false
+        previewProcessing: false,
+        highlightedLines: null
       },
 
       created: function(){
         this.formatOptions = JSON.parse(this.formatOptions);
         this.formats = Object.keys(this.formatOptions);
         this.format = this.initialSelected;
+        this.params = JSON.parse(this.paramsJson);
+        this.grok_str = this.params.setting.grok_str;
+        this.regexp = this.params.setting.regexp;
         this.$watch('regexp', function(ev){
           this.previewRegexp();
         });
-        this.$watch('grok_str', function(ev){
-          this.generateRegexp();
-        });
+
+        var updateGrokPreview = _.debounce(_.bind(this.generateRegexp, this), 256);
+        this.$watch('grok_str', updateGrokPreview);
       },
 
       computed: {
@@ -38,7 +41,7 @@
 
         updateHighlightedLines: function() {
           if(!this.regexpMatches) {
-            this.highlightedLines = "";
+            this.highlightedLines = null;
             return;
           }
 
@@ -88,6 +91,7 @@
         },
 
         previewRegexp: function(){
+          if(!this.regexp) return;
           var self = this;
           this.previewProcessing = true;
           new Promise(function(resolve, reject) {
diff --git a/app/views/shared/vue/_in_tail_format.html.erb b/app/views/shared/vue/_in_tail_format.html.erb
index a3ab042..483dff7 100644
--- a/app/views/shared/vue/_in_tail_format.html.erb
+++ b/app/views/shared/vue/_in_tail_format.html.erb
@@ -2,6 +2,7 @@
   formatOptions="<%= formats.to_json %>"
   initialSelected="<%= initialSelected %>"
   targetFile="<%= file %>"
+  paramsJson="<%= params.to_json %>"
   >
   <div class="form-group">
     <label>
@@ -22,10 +23,10 @@
     <div class="form-group" v-repeat="options">
       <label>{{ $value }} </label>
       <input type="text" name="setting[{{ $value }}]" v-model="{{ $value }}" size="100%" />
+      <span v-if="format == 'grok' && previewProcessing"><%= icon('fa-spin fa-refresh fa-lg') %></span>
     </div>
     <div v-if="format == 'grok'">
-      <span v-if="previewProcessing"><%= icon('fa-spin fa-spinner') %>previewProcessing</span>
-      <pre>{{{ highlightedLines }}}</pre>
+      <pre v-if="highlightedLines">{{{ highlightedLines }}}</pre>
       TODO: grok reference
     </div>
   </div>