[Vuejs]-Vue Laravel: How update a prop for a custom component

When you copy the initial prop value to a data value, ie

data () {
  return {
    // ...
    show_loading: this.prop_show_loading || false
  }
}

you lose any chance of detecting changes as the original reference to the prop will be broken when it gets a new value assigned.

Instead, just use the prop value in your template expressions, ie

v-if="prop_show_loading"

This way, it will react to external changes.

You can do the same for all the prop values as well as define defaults. Eg

props: {
  prop_success_message: {
    type: String,
    default: 'Success'
  },
  prop_fail_message: {
    type: String,
    default: 'Fail'
  },
  prop_show_modal: {
    type: Boolean,
    default: false
  },
  // etc...
}

See https://v2.vuejs.org/v2/guide/components-props.html#Prop-Validation