Ошибка «Превышен максимальный размер стека вызовов» при использовании компонента v-dialog дважды в одном представлении с Vue Наблюдаемый

Question

Когда я открываю и закрываю диалоговое окно v, я получаю:

VDialog.ts:238 Uncaught RangeError: Maximum call stack size exceeded.
    at VueComponent.onFocusin (VDialog.ts:238)
    at VueComponent.onFocusin (VDialog.ts:238)
    ...

Мой вид включает в себя один и тот же компонент дважды, как вы можете видеть ниже. Каждый использует разные слоты. Если я включаю компонент один раз, я не получаю эту ошибку.

Как воспроизвести ошибку: 1. Откройте диалоговое окно 2. Нажмите close на диалоговой карточке 3. Откройте диалоговое окно 4. Нажмите close еще раз 5. Появляется ошибка

Main. vue

<CreateProjectDialog>
    <template v-slot:default="slotProps">
        <v-btn v-on="slotProps.dialog.on" color="primary" class="white--text">
            Project <v-icon>mdi-plus</v-icon>
        </v-btn>    
    </template>
</CreateProjectDialog>

<CreateProjectDialog>
    <template v-slot:default="slotProps">
        <v-btn
            v-on="slotProps.dialog.on"
            class="ma-5 mr-md-12"
            fixed
            x-large
            fab
            bottom
            right
            color="primary"
        >
            <v-icon>mdi-plus</v-icon>
        </v-btn>  
    </template>
</CreateProjectDialog>

CreateProjectDialog компонент

<template>
    <div>
        <v-dialog v-model="dialog" max-width="600px">

            <template v-slot:activator="{ on }">
                <slot v-bind:dialog="{ on }"></slot>     
            </template>

            <v-form ref="form" v-model="valid">
                <v-card>

                    <v-card-title class="justify-center">
                    </v-card-title>

                    <v-card-text>
                    </v-card-text>

                    <v-card-actions>
                        <v-btn color="blue darken-1" text @click="dialog = false">Close</v-btn>
                        <v-btn color="blue darken-1 white--text" @click="submitProject" :disabled="!valid">Create</v-btn>
                    </v-card-actions>

                </v-card>
            </v-form>

        </v-dialog>
    </div>
</template>

Я использую это вычисленное свойство для вычисления значения диалога через наблюдателя в хранилище. js

createProjectDialog компонент

    computed: {
        dialog: {
            get () {
                return getters.projectDialog();
            },
            set (val) {
                mutations.toggleProjectDialog(val);
            }
        }
    },

store. js

import Vue from 'vue';

const state = Vue.observable({
    projectDialog: false
});

export const getters = {
    projectDialog () {
        return state.projectDialog;
    }
};

export const mutations = {
    toggleProjectDialog (val) {
        state.projectDialog = val;
    }
};

Если я полностью удаляю вычисленное свойство dialog и вместо него возвращаю обычное свойство данных, оно работает.

export default {
    data () {
        return {
            dialog: false
        }
    }
}

Я хочу понять, почему это происходит именно так, и как я могу заставить его работать с наблюдателем.

Есть ли лучший способ справиться с этим вместо использования слотов?