How much of this business logic belongs in Vuex?

Vuex allows you to share data !

For everything that concerns the state of the app its pretty straightforward.

All the data that can be used by multiple components should be added to the store.

Now concerning the business logic, even though I find its not really clear in the official documentation, it should follow the same principle.

What I mean is that logic that can be used by multiple components should be stored in actions.Moreover actions allows you to deal with async operations. Knowing this, your code that pulls the data should definitely be stored in vuex's actions.

What I think you should do is to put the request inside an action, then mutate the state of your variables and automatically your UI will reflect the changes.

Moreover, a good pattern to apply is to convert most of the logic to a state logic. For instance consider this demo of a jumping snowman. In here the click action results on updating a value from the store. Although the interesting part is that one component uses the watch functionnality to be notified when the store changes. This way we keep the logic inside the component but use the store as an event emitter.

var store = new Vuex.Store({    state: {    isJumping: 0  },  mutations: {    jump: function(state){      state.isJumping++;    }  }})Vue.component('snowman', {  template: '<div id="snowman" :class="color">⛄</div>',  computed: {    isJumping: function(){      return this.$store.state.isJumping;    }  },  watch: {    isJumping: function(){      var tl = new TimelineMax();      tl.set(this.$el,{'top':'100px'})      tl.to(this.$el, 0.2, {'top':'50px'});      tl.to(this.$el, 0.5, {'top':'100px', ease: Bounce.easeOut});    }  }})