Sync in Vue 2.x with Vuex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.0.0/vuex.js"></script>

<div id="app">
  <div v-for="(title, index) in $store.state.titles">
    <p>Value in parent: {{title}}</p>
    <custom-component :index="index"></custom-component>
    <button v-on:click="$store.commit('CHANGE_TITLE', [index, 'CHANGED FROM PARENT']);">
      CHANGE FROM PARENT
    </button>
  </div>
</div>

<template id="custom-component">
  <div>
    <p>Value in child: {{$store.state.titles[index]}}</p>
    <button v-on:click="$store.commit('CHANGE_TITLE', [index, 'CHANGED FROM CHILD']);">
      CHANGE FROM CHILD
    </button>
  </div>
</template>

JavaScript

var store = new Vuex.Store({
  state: {
    titles: [],
  },
  mutations: {
    CHANGE_TITLE: function(state, obj) {
      Vue.set(state.titles, obj[0], obj[1]);
    },
  }
});

Vue.component('custom-component', {
  template: '#custom-component',
  props: ['index'],
});

var app = new Vue({
    el: '#app',
    store: store,
    created: function() {
    	console.log(this.$store, this, this.store);
    }
});