title: HMR strange behavior in Safari with store pattern - Vue2
body: <p>I've implemented a simple user store in Vue 2 to keep track of the currently authenticated user.</p>
  
  <p>It looks like this:</p>
  
  <pre><code>const user = {
    isGuest: true,
  
    state: {
      name: ''
    },
  
    save (user) {
      this.isGuest = false
      this.state = user
    },
  
    clear () {
      this.isGuest = true
      this.state = { }
    }
  }
  </code></pre>
  
  <p>I also have a simple authentication service (implemented as a plugin) which fetches the user from the api and saves him into the store. Whenever the user logs in, OR the app is loaded the auth service fetches the user and saves him to the store.</p>
  
  <p>I am trying to access the store from another component (my navbar). I have this in my component to import the userStore:</p>
  
  <pre><code>import user from '../store/user'
  
  export default {
    data () {
      return {
        user
      }
    }
  }
  </code></pre>
  
  <p>This is all working really nicely in Chrome and in Firefox. </p>
  
  <p>However, in Safari I get some weird behavior:</p>
  
  <p>If I force the navbar's data to do a hot reload by saving the Navbar.vue file, the data is fetched from the store. However, in all other cases (page reload, or after a vue-router redirect after log in) the navbar's data is not updated with the current user store.</p>
  
  <p>How can I fix this to work in all browsers?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I've got a little more information:</p>
  
  <p>If I sit on the refresh button in Safari, randomly I sometimes get the correctly rendered data from the user store, and randomly I don't.</p>
  
  <p>My hunch is that sometimes the api call returns quick enough for the data to be available when the navbar data is rendered, and sometimes it does not.</p>
  
  <p>In other browsers, even when the data is not available at load, it the reactive data is updated when the data becomes available. This is not the case in Safari for some reason (except that the hot reload does work if I force it to update by re-saving the file)</p>
  
  <p><strong>EDIT #2:</strong></p>
  
  <p>I can confirm that this is the issue. My data does not update when the store is updated.</p>
  
  <p>I proved this by having the navbar component sleep for 2 seconds before fetching data from the store, and sure enough the data is populated correctly every single time now in Safari.</p>
  
  <p>So the question now becomes more fundamental, how can I use the store pattern in Safari?</p>