Vue

HTML

<div id="app">

  <p>
    bound via v-model
  </p>

  <one v-model="something"></one>
  <br/>
  <one-one v-model="something"></one-one>

  <p>
    de-sugared
  </p>

  <one v-bind:value="something" @input="something = $event"></one>
  <br/>
  <one-one v-bind:value="something" @input="something = $event">></one-one>

  <hr/>
  <pre>something:

{{something}}</pre>
</div>

Vue

Vue.component('one', {
	template: '<div><button @click="t">[1,2,3,4]</button> <span v-for="a in value.values">{{a}},</span></div>',
	props: ['value'],
  computed: {
  	count() {
    		return this.value.values.length;
		}
  },
  methods:{ t(){
  	this.$emit("input", {values:[1,2,3,4]})
  }}
});

Vue.component('one-one', {
	template: '<div><button @click="t">[1,2,3,4,5,6]</button>  <span v-for="a in value.values">{{a}},</span></div>',
	props: ['value'],
  computed: {
  	count() {
    		return this.value.values.length;
		}
  },
  methods:{ t(){
  	this.$emit("input", {values:[1,2,3,4,5,6]})
  }}
});



new Vue({
  el: "#app",
  data: {
    something: {
    	values: [0,'inital',0]
    }
  }
})