Vue2 component somehow modifying prop

So I've got a vue component I'm using as an editing interface...
The database has a jsonified array inside of it (don't ask... I don't like it either), which has to be in a particular format... In order to allow admins to edit this string array without breaking the format, I'm making a vue editing component which will break the parts up into various textboxes etc...

I would like to have two separate variables - one for what the string array IS, and one for what they are changing... the first variable would be updated when they saved their changes...

The issue I have is that for some reason, when I update one of the variables... not only does the other variable change... but the prop changes as well...
I was under the impression that components could not change their props..?

In particular, the array looks something like this:

[
    '1',
    '2'
    ['1','2','3','4']
]

And when I do a .splice() on the sub-array, both variables and the prop updates...

Some sample code...

Laravel blade view:
<editor :somearray=></editor>

Component props/data setup:

props: {
    somearray: {
        default: [],
        type: Array
    }
}

data(){
    return {
        editedArray: this.somearray,   // This is what will be saved
        wipArray: this.somearray       // This is what changes as they edit
    }
}

Some of the methods:

resetChanges(){
    this.wipArray = this.editedArray;
}

I'm probably missing something obvious... or misunderstanding how things work...

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2FKbiD9
via IFTTT