Vue

HTML

<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
<div id="app" class="component">
  <v-component></v-component>
</div>


<template id="template">
   <div>{{someData}}</div>
</template>

CSS

.component {
  text-align: center;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
  border: 2px solid grey;
  margin: 10px;
  border-radius: 30px;
}

JavaScript 1.7

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
  	setCount(state, payload) {
    	state.count = payload;
    }
  }
})

Vue.component("v-component", {
	template: "#template",
  data() {
  	return {
    }
  },
  computed: {
  	...Vuex.mapState(["count"]),
    someData() {
      // do the ifs elses, and other validations
    	return this.count;
    }
  },
});



new Vue({
  el: "#app",
  store,
  data: {},
})


// Simulate api 
setTimeout(() => {
	alert("Updating");
	store.commit("setCount", 2);
}, 2000);