こんな感じのモーダルコンポーネントがあるとします。

<template>
    <div class="background" @click.self="closeModal()">
        <div class="Modal--form__medium">
            <div class="Modal__header">
                <div v-show="title" class="Modal__title--center">
                  {{ title }}
                </div>
                <slot name="header_button" />
            </div>
            <slot name="subtile" />
            <div class="Modal__body--dialog">
                <slot name="main" />
            </div>
            <div class="Modal__footer">
                <slot name="footer" />
            </div>
            <slot name="modal" />
        </div>
    </div>
</template>

backgroundクラスにモーダルのオーバーレイにbackground-color:rgba(0,0,0,0.75);みたいなスタイルが設定することが多いと思います。
しかし、そうした場合、複数のモーダルを表示した場合にbackground-colorが重なってしまって濃い色になってしまう場合があります。
つまりは、一つのモーダルの背景のみbackground-colorをつけたいです。

そこで以下のようなmixinを書くことで複数モーダルが出ていても必ず一つのモーダルのみ背景を当てることができます。
document.querySelectorは一番最初に見つけた要素しかとってこないためその仕組みを利用して#backgroundにスタイルを当てています。


   import { mapGetters } from 'vuex';

    export default {
        computed: {
            ...mapGetters({ modals: 'modal/modals' }),
        },
        watch: {
            modals: {
                immediate: true,
                handler(newValue) {
                    this.$nextTick(() => {
                        const background = document.querySelector('#background');
                        if (background) background.style.background = 'rgba(0, 0, 0, 0.5)';
                    });
                }
            }
        }
    };

これを使えば複数のモーダルの管理しやすくなると思いますので是非お試しください。

もっといい方法あるがあればコメントいただければと思います！

そろそろvue3もでるし、勉強熱が高まりますね。

ここまで見ていただきありがとうございました。