title: Vuejs2 update Vue.prototype global object
body: <p>I have create a global object in my main.js to access logged in user's data throughout the application between controllers </p>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>Vue.prototype.user = getUser() // assume a method to getUser data
  </code></pre>
  
  <p>Now the above <code>.user</code> object will be available in other components with <code>this.user</code>,</p>
  
  <p>what I'm looking for is if I make change to <code>this.user</code> in any component, the changes reflects to other components too, this is not happening right now</p>
  
  <p>I've two components, one to update data in <code>this.user</code> <code>EditProfileComponent.vue</code> </p>
  
  <pre><code>&lt;input type="text" v-model="user.firstName" /&gt;
  &lt;input type="text" v-model="user.lastName" /&gt;
  </code></pre>
  
  <p>and other to show data <code>UserCardComponent.vue</code></p>
  
  <pre><code>&lt;h1&gt;{{user.firstName}} {{user.lastName}}&lt;h1&gt;
  </code></pre>
  
  <p>on the submit of above form I'm saving data into database and getting it back at with <code>getUser()</code> on refresh,</p>
  
  <p>What I'm expecting, when I make change to v-model in form it should show change directly into <code>UserCardComponent.vue</code></p>