JSFiddle - React, Tailwind, and code Playground

by Edward

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1>
    v-model with an array value
  </h1>
  <Outer :record="selections"></Outer>

  <p>Your selections:</p>
  <p v-text="mySelections"></p>
</div>

JavaScript

var cust = {
	template: '<div><p>Component: <span v-for="v in value">{{v}}</span></p><button @click="send">Click Me</button></div>',
  name: 'Custom',
  props: {
    value: Array,
  },
	methods: {
     send() {
     		this.$emit('input', [1,2,3]);
     }
  },
  computed: {
  	currentValue() {
    	return JSON.stringify(this.value);
    }
  }
};

var outer = {
	template: '<div><Custom v-model="myRecord.field"></Custom></div>',
  components: { Custom: cust },
  name: 'Outer',
  props: {
      record: Object,
  },
  data() {
  	return {
    	myRecord: {},
    };
  },
  created() {
  	this.myRecord = JSON.parse(JSON.stringify(this.record));
  },
  watch: {
  	record() {
	    this.myRecord = JSON.parse(JSON.stringify(this.record));
    }
  }
};

var app = new Vue({
	el: "#app",
  components: { Outer: outer },
	data: {
  	selections: { field: [1,2] },
  },
  computed: {
  	mySelections: function() {
    	return JSON.stringify(this.selections);
    }
  }
});