Vue.js 2.3 - Element UI Dialog - Sync and Props

Question

I'm using vue-js 2.3 and element-ui. Since the update 2.3 of vue-js and the reintroduction of sync, things have changed and I have had a hard time figuring out my problem.

Here is the jsfiddle : https://jsfiddle.net/7o5z7dc1/

Problem

The dialog is only opened once. When I close it I have this error:

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: "showDialog"

Questions

What am I doing wrong?

How can I fix the current situation?

EDIT

If I'm creating a data I manage to remove the error message but the dialog does not close anymore

<div id="app">
      <left-panel v-on:show="showDialog = true">></left-panel>
      <popup v-if="showDialog":show-dialog.sync="showDialog"></popup>
    </div>

    <template id="left-panel-template">
      <button @click="$emit('show')">Show Component PopUp</button>
    </template>


    <template id="popup">
        <el-dialog :visible.sync="showDialog" @visiblechange="updateShowDialog">I am the popup</el-dialog>
    </template>


        Vue.component('left-panel', {
      template: '#left-panel-template',
      methods: {
      },
    });

    Vue.component('popup', {
      template: '#popup',
      props : ['showDialog'],
      methods: {
       updateShowDialog(isVisible) {
           if (isVisible) return false;
           this.$emit('update:showDialog', false )
       },
      },
    });

    var vm = new Vue({
      el: '#app',
      data: {
        showDialog: false,
      },
      methods: {

      }
    });

Answer 1

You avoid the mutation warning by making a copy of the prop and mutating that instead of mutating the property directly.

Vue.component('popup', {
  template: '#popup',
  props : ['showDialog'],
  data(){
    return {
        show: this.showDialog
    }
  },
  methods: {
   updateShowDialog(isVisible) {
       if (isVisible) return false;
       this.$emit('update:showDialog', false )
   },
  },
});

I also changed your template to handle the visible-change event correctly.

<el-dialog :visible.sync="show" @visible-change="updateShowDialog">I am the popup</el-dialog>

Updated fiddle.