title: VueJS: Replace/Update Array
body: <p>I currently have an array of object that I am rendering to a table. I am trying to follow the examples provided by Vuejs to use a &quot;single source of truth&quot; shared between multiple vues on the same page.</p>
  <p>Overall, I am trying to make it where when vue1.refresh() is triggered, all the vues update their data when the &quot;single source of truth&quot; is updated. However, self.surveys = surveys; only updates the data on vue1.</p>
  <p>Note: I am following the guide from <a href="https://v2.vuejs.org/v2/guide/state-management.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/state-management.html</a></p>
  <pre><code>// The single source of truth
  var cache = {
      data: [{...}] // Array of objects
  }
  
  var vue1 = new Vue({
      el: &quot;#table&quot;,
      data: {
          surveys: cache.data // Points to the single source of truth
      },        
      methods: {
          refresh: function(){
              var self = this;                 
  
              // After getting data back from an ajax call
              .done(function(surveys) {
                  self.surveys = surveys;
              });
          },
      }
  });
  
  var vue2 = new Vue({
      el: &quot;#table&quot;,
      data: {
          surveys: cache.data // Points to the single source of truth
      },        
      methods: {
          // Methods
      }
  });
  </code></pre>