Proper way to implement Edit functionality

What is the propper way of implementing edit functionality for my objects?
One approach I’ve tried is to instantiate the edit component passing in the object to be edited but if I pass it in as a prop, then I get warnings about mutating the prop. Sometimes the object to be edited has lists of children that should also be editable. What is the Vue way of implementing this properly ?

Could you show us your approach of solving this? This question is pretty generic which means I could give you an generic answer which wouldn’t help you that much.

Most of the time, as the warning said, you get this message, when you directly manipulate the prop of the parent component.

You have two options to solve this.

Either you $emit a value to the parent component and there the value is getting changed or you copy the prop to the data object within the child component.

For instance:

// This is your child component

data () {
  return {
    innerState: {}
  }
},

props: {
  editObject: {
    type: Object
  }
},

mounted () {
  this.innerState = this.editObject
},

watch: {
  editObject: {
    handler: function (value) {
      this.innerState = value
    },
    deep: true
  }
}

Instead of working with the prop now, you would work with the innerState data value