Set component data initial value to result of vuex fetch

This is coming up all the time for us, and I’m not sure about the best practice.

  • We have component Bar that contains a data property for input ‘foo’
  • ‘foo’ should default to the result of a back end fetch via a vuex store
  • That fetch is kicked off by the route change that mounts the component.

How do you set the initial state of the component’s property while allowing it to change within the component?

  • Using a simple computed property won’t work because we want to change the value locally
  • Using a get / set custom computed property seems heavy
  • Using a watcher shouldn’t work because we only want to update this after the initial fetch
  • Using a then on the vuex fetch is complex because it’s the router calling the fetch and the subcomponent we want showing it
  • Using a mounted could mount before the fetch completes

We have found solutions, but I was wondering if there’s a best practice for this?

Thank you