Avoid data binding on nested arrays

Object.assign() works, but nested arrays are still binding to the object

by Razinar

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo" v-cloak>
  <input type="text" class="header-title" v-model="selected_item.contents[0].title">
  <div>{{items[0].contents[0].title}}</div>
  <div>{{selected_item.contents[0].title}}</div>
   
  <input type="text" class="header-title" v-model="selected_item.name">
  <div>{{items[0].name}}</div>
  <div>{{selected_item.name}}</div>
</div>

CSS

body {
    font-family: Helvetica Neue, Arial, sans-serif;
    color: red;
}

JavaScript

var demo = new Vue({
    el: '#demo',
    data: {
        items: [
        	{
          	name: 'Pencil case',
            contents: [
            	{title: "Red Pencil"}, {title: "Blue Pencil"}
      			]
        	}, 
          {
          	name: 'Rubber container',
            contents: [
            	{title: "Yellow Rubber"}, {title: "Green Rubber"}
      			]
        	},
        ],
        
        selected_item: {
          name: 'Pencil case',
          contents: [
            {title: "Red Pencil"}, {title: "Blue Pencil"}
          ]
        }
    },
    mounted() {
    	this.selected_item = Object.assign({}, this.items[0]);
    }
})