Vuex input issue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.0.0/vuex.js"></script>
<div id="app">
{{foo}}
</div>

Babel + JSX

/* ----- Store ----- */
const state = {
  value: {},
};

const mutations = {
  INPUT (state, {key, val}) {
  	console.log('INPUT', state.value, key, val);
    state.value[key] = val;
	}
};

const store = new Vuex.Store({
  state,
  mutations,
  modules: {
  	['header_asdasdasd']: {
      state: { value: [] }
    }
  },
  
  getters: {
		my_getter: state => key => {
        console.log('right from the getter', state.value, key);
        return state.value[key];
    },
    direct(state) { return state.value['foo']; },
	}
});

/* ----- Component ----- */
new Vue({
	el: '#app',
	store,
  computed: {
  	foo() {
    console.log('foo');
    	return this.$store.getters.my_getter('foo');
    },
    
  	bar() {
    console.log('bar');
    return this.$store.getters.direct;
    }
  },
  created () {
  setTimeout(() => this.$store.commit('INPUT', {key: 'foo', val: 2}), 1000);
  	this.$store.commit('INPUT', {key: 'foo', val: 1});
  }
});