vuex store

HTML

<script src="https://cdn.rawgit.com/vuejs/vue/e6d224c3c5ca3ff6a365326ba615d116764b68f2/dist/vue.js"></script>
<script src="https://cdn.rawgit.com/vuejs/vuex/cca2c4b19b7656ea4632d47c39640da68d94c239/dist/vuex.js"></script>
<div id="container">
  <input type="text" v-model="message"><br><br>
  <button v-on:click="addItem()">Add</button>
  <div v-for="(item, index) in items">
     Name: <input type="text" v-model="item.name"><br>
     Surname: <input type="text" v-model="item.surname">
  </div>
</div>

<div id="view">
  <ul>
    <li v-for="(item, index) in items">
      Name: {{ item.name }}, Surname: {{ item.surname }}
    </li>
  </ul>
</div>

JavaScript

const store = new Vuex.Store({
  state: {
  	message: '',
  	items: []
	}
})

// Vue 
const vm = new Vue({
	el: '#container',
  store,
  computed: {
  	message: {
  		get() {
      	return this.$store.state.message
      },
      set(newmessage) {
      	this.$store.state.message = newmessage
      }
  	},
  	items () {
  		return this.$store.state.items
  	}
  },
  methods: {
  	addItem () {
    	console.log(this.$store.state)
      this.$store.state.items.push({ name: '', surname: '' })
    },
    delItem(index) {
    	
    }
  }
})

// Vue 
const vm2 = new Vue({
	el: '#view',
  store,
  computed: Vuex.mapState(['items'])
})