title: Avoid databinding on nested arrays - vue.js
body: <p>I'm getting headache avoiding databinding on nested arrays.
  Let's say i have 2 objects: </p>
  
  <ul>
  <li>Items, array of all items</li>
  <li>Item, a single item object</li>
  </ul>
  
  <p>I use </p>
  
  <pre><code>Object.assign({}, object) 
  </code></pre>
  
  <p>to avoid databinding, bit this only works for non-nested array fields.
  Example:</p>
  
  <pre><code>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]);
  }
  </code></pre>
  
  <p>There's no databinding on name, but there is still binding on contents.title for example. I absolutely need to assign the object absolutely without databinding.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/Razinar/04tLy8z1/4/" rel="nofollow noreferrer">JSFIDDLE</a>.
  In the first input binding on "title" is real, while in the second input there are no binding on "name" as expected. I can't get over it, help me please.</p>