Mutliple Modals in same page Vuejs 2 - modal-dialog

Question

I'm a newbie in Vuejs (i'm learning).
I'm trying to do many modals in same page using Vuejs2
Like many people, i have this console warning :
[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:
I read the official doc. I understand that i'm trying to mutating a props and now with vuejs2 its no longer possible.
I tried by using data and computed methods but still doesn't work.
I know the props are now in one way and i think that i understood i need to $emit some props
Here my code:
app.js
Vue.component('modal', Modal);
Vue.component('modal-add-equipe', ModalContent);
Vue.component('modal-user-team', ModalContentTeamUser);
new Vue({
delimiters: ['${', '}'],
el: '#app',
data: {
showModal: false,
showModalAddEquipe: false,
showModalUserTeam: false
},
methods: {
openModal: function(name) {
console.log(this.$refs[name]);
this.$refs[name].show = true;
//this.showModal = true;
},
closeModal: function(name) {
this.$refs[name].show = false;
//this.showModal = false;
}
}
})
Modal.vue
<template>
<transition name="modal">
<div class="modal-mask" #click="close" v-show="show">
<div class="modal-wrapper">
<div class="modal-container with-border" #click.stop>
<slot></slot>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
props: ['show', 'onClose'],
methods: {
close: function () {
this.onClose();
}
},
ready: function () {
document.addEventListener("keydown", (e) => {
if (this.show && e.keyCode == 27) {
this.onClose();
}
});
}
}
</script>
ModalContent.vue
<template>
<modal :show.sync="show" :on-close="close">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
</slot>
</div>
</modal>
</template>
<script>
var Modal = require('./Modal.vue');
export default {
props: ['show'],
methods: {
close: function () {
this.$emit('close', false);
},
},
components:{
'modal': Modal
}
}
</script>
the call in twig :
{% for user in usersTeamed %}
<span #click="openModal('userTeam{{ user.getId() }}')"><strong>Equipes</strong></span>
<modal-user-team ref="userTeam{{ user['id'] }}" :show.sync="showModal" #close="closeModal('userTeam{{ user['id'] }}')">
<h3 slot="header">{{ 'equipe_modal_user_equipe'|trans }}</h3>
<div slot="body">
{{ form_start(formUsersTeamed[user['id']]) }}
{{ form_rest(formUsersTeamed[user['id']]) }}
{{ form_end(formUsersTeamed[user['id']]) }}
</div>
</modal-user-team>
{% endfor %}
My goal it's to open one modal (but many in same page and avoid 1k variables like do the example https://v2.vuejs.org/v2/examples/modal.html ) find by "rel"
This code is working but i have console worning !
If someone can help me please :)
PS: I use also gulp with vueify, babelify and aliasify
PS2 : Sorry for my english