javascript - Allowing for multiple modals in Vue.js -

following demo on official site (http://vuejs.org/examples/modal.html)

i'm trying set can define multiple modal windows on page,

http://jsfiddle.net/m2sv4at5/

but since modals['foo'] , modals['bar'] aren't defined, vue throwing warnings it's getting invalid types being sent prop. initialize script false both, works, requires me hard-code modal names script, don't want.

in jquery defining data target , making sure matches element right id , class of modal, i'm unsure how similar in vue.

if assign reference id modal component using v-ref become available parent , able set show = true refering id. if sounds complicated :

<button id="show-show" @click="showmodal('foo')">show foo</button>  <modal v-ref:foo>   <h3 slot="header">foo header</h3> </modal>  new vue({   el: '#app',   methods: {     showmodal: function(name) {       this.$refs[name].show = true;     }   } }) 

http://jsfiddle.net/m2sv4at5/1/

child component refs