Untitled

<body>
    <button>open popup #1</button>

    <popup
        inline-template
    >
        <div class="popup popup_1">
            Content #1
        </div>
    </popup>

    <popup
        inline-template
    >
        <div class="popup popup_2">
            Content #2
        </div>
    </popup>
</body>
...

<script>
    Vue.component('popup', {
        methods: {
            open: function() {
                // ...
            },
        }
    });

    var app = new Vue({
        el: 'body',
    });
</script>

<template id="template-popup-component">
  <button v-on:click="togglePopup">Toggle this popup</button>
  <div v-if="isShow" class="popup-content">
    <slot></slot>
  </div>
</template>
<popup>
  Hello, World!
</popup>

Vue.component('popup', {
   template: '#template-popup-component',
   data: function() {
     return {
       isShow: false
     }
   },
   methods: {
     togglePopup: function() {
       this.isShow = !this.isShow;
     },
   }
});

var app = new Vue({
  el: 'body',
});

<body>
    <button
        @click="$refs.popup1.open()"
    >
        open popup #1
    </button>

    <popup
        v-ref:popup-1
        inline-template
    >
        <div
            v-if="data.open"
            class="popup popup_1"
        >
                Content #1
        </div>
    </popup>

    <popup
        v-ref:popup-2
        inline-template
    >
        <div
            v-if="data.open"
            class="popup popup_2">
            Content #2
        </div>
    </popup>
</body>
...

<script>
    Vue.component('popup', {
        data: function() {
            return {
                data: {
                    open: false
                }
            }
        },
        methods: {
            open: function() {
                this.data.open = true;
            },
        }
    });

    var app = new Vue({
            el: 'body',
    });
</script>