vue.js 他のモーダルmagnificPopupと組み合わせる場合

こんな感じのmagnificPopupが組み込まれている場合、

<a class="pop-up" href="confirm.php"><img src="./close.png" alt=""/></a>

$(function(){
    $('.pop-up').magnificPopup({
        type: 'iframe',
        disableOn: 200,
        mainClass: 'mfp-fade',
        removalDelay: 200,
        preloader: false,
        fixedContentPos: false
    });
});

confirm.php で

                       <div class="bwrap">
                            <a href="#" v-on:click="closeModal">OK</a>
                            <a href="#" v-on:click="cancel">キャンセル</a>
                        </div>

としておいて、

var app = new Vue({
    el: '.bwrap',
    methods: {
        closeModal: function(){
            console.log('ok');
            parent.$.magnificPopup.close();
        },
        cancel: function(){
            console.log('canceled');
            parent.$.magnificPopup.close();
        },
    },
})

こんな感じかなー。いずれにしろmagnificPopupのiframeは極力避けた方がいい。