G2100636

Решил задачу вот так:

<template>
    <div class="popup__backdrop d-flex" v-if="popup"
         @mousedown="backdrop_mousedown = true"
         @mouseup="backdrop_mouseup_func"
    >
        <div class="popup"
             @click.stop
             @mousedown.stop
             @mouseup.stop
             @mouseup="backdrop_mousedown = false">
            <CloseIcon class="close-btn" @click="closePopup"/>
            <component :is="popup.name"
                       v-bind="popup.props"
                       @close="closePopup"
            />
        </div>
    </div>
</template>

data() {
    return {
        backdrop_mousedown: false,
        backdrop_mouseup: false,
    }
},
methods:{
    backdrop_mouseup_func(){
        if (this.backdrop_mousedown === true){
            this.$store.commit('popups/closePopup');
        }
        this.backdrop_mousedown = false;
        this.backdrop_mouseup = false;
    },
    closePopup(){
        this.$store.commit('popups/closePopup');
    },
},

Т.е. отдельно фиксируем mousedown и mouseup, И если mouseup для фона произошел именно после mousedown для фона, то тогда закрытие модалки.

попробуйте у селекта атрибут name указать с нужным значением