Separate vue components

app/assets/javascripts/fluent_log.js

@@ -0,0 +1,30 @@
+(function(){
+  "use strict";
+
+  $(function(){
+    if($('#fluent-log').length === 0) return;
+
+    new Vue({
+      el: "#fluent-log",
+      data: {
+        "logs": [],
+      },
+
+      created: function(){
+        this.fetchLogs();
+      },
+
+      methods: {
+        fetchLogs: function() {
+          var self = this;
+          new Promise(function(resolve, reject) {
+            $.getJSON("/tutorials/log_tail", resolve).fail(reject);
+          }).then(function(logs){
+            self.logs = logs;
+          });
+        },
+      }
+    });
+  });
+})();
+

app/assets/javascripts/tutorial.js

@@ -2,12 +2,13 @@
   "use strict";
 
   $(function(){
+    // At tutorial chapter1, sending request to fluentd
+
     if($('#chapter1').length === 0) return;
 
     new Vue({
       el: "#chapter1",
       data: {
-        "logs": [],
         "payloads": [
           {
             "path": "/debug.foo",
@@ -37,19 +38,7 @@
         ]
       },
 
-      created: function(){
-        this.fetchLogs();
-      },
-
       methods: {
-        fetchLogs: function() {
-          var self = this;
-          new Promise(function(resolve, reject) {
-            $.getJSON("/tutorials/log_tail", resolve).fail(reject);
-          }).then(function(logs){
-            self.logs = logs;
-          });
-        },
         sendRequest: function(payload){
           new Promise(function(resolve, reject) {
             $.ajax({

app/views/tutorials/chapter1.html.erb

@@ -20,7 +20,11 @@
       </code>
     </p>
   </form>
+</div>
+<!-- /vue.js -->
 
+<!-- vue.js -->
+<div id="fluent-log">
   <pre>
 <button class="btn btn-primary" v-on="click: fetchLogs"><%= t ".reload_log" %></button>