title: How to use global variables in Vue JS components?
body: <p>I'm trying to develop a web-app using Vue JS. Single File components(.vue files) is a nice way to create components but I don't want to use any node modules. And I found <a href="https://github.com/FranckFreiburger/http-vue-loader" rel="nofollow noreferrer">https://github.com/FranckFreiburger/http-vue-loader</a> which will allow me to load .vue files directly from my html/js.</p>
  
  <p>I'm trying to populate real-time data from websocket to a html table which is inside a component. Now I want to use the same websocket data for multiple components. I created the websocket and a global variable to store data outside the component(ie, in app.js). Now I used this variable inside my component for real-time data updates. But html table is not getting updated though I'm receiving data.</p>
  
  <p>The idea is to create a single websocket and use the data for multiple components.</p>
  
  <p>I'm actually new to Vue framework so forgive if any understanding issues are there.</p>
  
  <p>Here is my sample code:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;body&gt;
    &lt;div id="app"&gt;
          &lt;div&gt;
            &lt;comp1&gt;&lt;/comp1&gt;
            &lt;comp1&gt;&lt;/comp1&gt;
          &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script src="js/vue.js"&gt;&lt;/script&gt;
    &lt;script src="js/httpVueLoader.js"&gt;&lt;/script&gt;
    &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var global_data = [];
  var ws = new WebSocket("ws://127.0.0.1:9012/ws");
  ws.onmessage = msg =&gt; {
     global_data = JSON.parse(msg.data);
     console.log(global_data);
  };
  
  new Vue({
    el: "#app",
    components: {
      'comp1': httpVueLoader('js/component1.vue')
    },
    data: {
  
    }
  });
  </code></pre>
  
  <p><strong>component1.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;table id="tm_table" class="content-table"&gt;
        &lt;thead&gt;
          &lt;th&gt;Parameter&lt;/th&gt;
          &lt;th&gt;Value&lt;/th&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr v-for="(parameter, id) in rt_data.params" :key="id"&gt;
            &lt;td&gt;{{parameter.param}}&lt;/td&gt;
            &lt;td&gt;{{parameter.value}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  module.exports = {
    data() {
      return {
        rt_data: global_data,
      };
    }
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>Any help to solve this problem or even suggestion to any different approach is highly appreciated. Thank you.</p>