Vuetify v-dialog would not open - :value property does not work

Question

I just tried to create a separate form using Vue and vuetify's v-dialog. Unfortunately, once taken into separate component the thing stopped working without any error.

Here's the code to my component:

<template>
    <v-dialog :value="dialogOpen" persistent>
        <template v-slot:activator="{ props }">
            <v-btn color="primary" v-bind="props">Add new</v-btn>
        </template>
        <v-card>
            <v-card-title>
                <span class="text-h5">Subscriber</span>
            </v-card-title>
            <v-card-text>
                <v-container>
                    <v-row>
                        <v-col cols="12" sm="6">
                            <v-text-field v-model="activeSubscriber.name" label="Name" required></v-text-field>
                        </v-col>
                        <v-col cols="12" sm="6">
                            <v-text-field v-model="activeSubscriber.email" label="Email" required></v-text-field>
                        </v-col>
                        <v-col cols="12" sm="6">
                            <v-select
                                v-model="activeSubscriber.state"
                                :items="['active', 'unsubscribed', 'junk', 'bounced', 'unconfirmed']"
                                label="State*"
                                required>
                            </v-select>
                        </v-col>
                    </v-row>
                </v-container>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="blue-darken-1" variant="text">
                    Close
                </v-btn>
                <v-btn color="blue-darken-1" variant="text" @click="createSubscriber(activeSubscriber)">
                    Save
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>
<script>

import { mapGetters } from 'vuex';

export default {
    name: 'SubscriberForm',
    props: {
        id: null,
        dialogOpen: false,
    },
    methods: {
        createSubscriber(subscriber) {
            this.$store.dispatch('subscribers/createSubscriber', subscriber).then(() => this.dialogOpen = false).then(() => alert(1));
        }
    },
    watch: {
        id: function(newId) {
            if (newId !== null) {
                this.$store.dispatch('subscribers/getSubscriber', newId);
            }
        },
    },
    computed: {
        ...mapGetters('subscribers', ['activeSubscriber']),
    }
}
</script>

Basically, the only thing that I changed compared to examples on their website was switch v-model to :Value because we are actually passing the properties to the component.

The component is called like that

<SubscriberForm :id="subscriberId" :dialog-open="dialogOpen"/>
....
methods: {
    openEditModal(id) {
       this.subscriberId = id;
       this.dialogOpen = true;
   },
},

I tried watching the property dialogOpen and it gets passed perfectly fine.

What could be the issue?

UPDATE: tried the top voted solution at vuetify: programmatically showing dialog It resolved the issue, however broke the activator button. So that does not fly as well