Reuse Modal with VueJS 2

Question

I see a reuse modal in JSFiddle use Vue version 1: https://jsfiddle.net/_kemar/d3jecL8n/

But when I change to Vue version 2, it can't work. How can I fix this? https://jsfiddle.net/chelsea39/awwk6v5h/1/

Error when updating to Vue2:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "show"

Answer 1

The issue is that you are trying to change the show prop, which is passed from a parent component inside the child component. You can copy the show boolean into the child component data inside the child component lifecycle hooks and then you can modify it freely inside the child component.