title: Vue two-way data binding issue
body: <p>My own vue component sends http request to receive array of objects, then I store the answer in data property, and it's fine. Now I want to bind this array to v-model, but when user will input something my array is changed too. I want to store the array for later and make it not editable, I just want to bind its value to v-model, not reference to my array. My target is to allow user to reset v-model value to array received from api. I hope you get the point and you will be able to help me.</p>
  
  <pre><code>&lt;draggable v-model="myArray"&gt;
     &lt;div v-for="element in myArray" :key="element.id"&gt;{{element.name}}&lt;/div&gt;
  &lt;/draggable&gt;
  &lt;button @click="addElement"&gt;New&lt;/button&gt;
  </code></pre>
  
  <pre><code>data() {
     return {
         myArray: [],
         array: []
     }
  },
  methods: {
     addElement() {
        myArray.push({id:1, name:'something'});
     },
     getData() {
        axios(...)
        .then(res =&gt; {
           this.array = response.data;
        });
     }
     setData() {
        this.myArray = this.array;
     }
  }
  </code></pre>
  
  <p>Now if user will add new element to <code>myArray</code> it will be also inserted in <code>array</code></p>