How to merge components in VueJS

Question

The Laravel framework and the laravel.mix compiler are used. There is one main component "dialog".

<template>
    <transition-group
        enter-active-class="animate__animated animate__zoomInDown"
        leave-active-class="animate__animated animate__zoomOutDown"
        tag="div"
    >
        <div v-if="show" :key="1" class="d-dialog">
            <div class="dialog-mask" @click="close"></div>
            <div :style="{'width': width}" class="dialog">
                <h2 class="dialog-title"><slot name="title"></slot></h2>
                <slot></slot>
            </div>
        </div>
    </transition-group>
</template>

<script>
    export default {
        name: "dialog",
        props: {
            show: {
            default: false
        },
        width: {
            default: '25%'
        }
    },
    data() {
        return {
            //
        }
    },
    methods: {
        close() {
            this.show = false;
            this.$emit('close');
        },
        onEscapeKeyUp(event) {
            if (event.which === 27) {
                this.close();
            }
        }
    },
    watch: {
        show: {
            immediate: true,
            handler(val) {
                if (val === true) {
                    document.body.style.overflow = 'hidden';
                    window.addEventListener("keyup", this.onEscapeKeyUp);
                } else {
                    document.body.style.overflow = 'auto';
                    window.removeEventListener("keyup", this.onEscapeKeyUp);
                }
            }
        }
    },
}
</script>

And the "price" component.

<template>
    <dialog :show="show"></dialog>
</template>

<script>
import VInput from "../../v-input";
import Dialog from "../../dialog";

export default {
    name: "price",
    components: {Dialog, VInput},
    data() {
        return {
            show: false
       }
    },
    methods: {
        //
    },
}
</script>

HTML:

<div class="prices">
    <v-button
        text="Price"
        icon="fa-solid fa-plus"
        color="success"
    ></v-button>

    <price></price>
</div>

JS:

new Vue({
    el: '.prices',
    data: {
        //
    }
});

Instead of one template getting into another, the following comes out (DevTools).

<div class="prices">
    <button class="btn btn-success">
        <span>
            <i class="fa-solid fa-plus"></i>
            Цена
        </span>
    </button>
    <dialog show="false"></dialog>
</div>

And Vue DevTools doesn't define it as a component either. The idea is this, there is the main component "Dialogue", which is used in the basis of many other components. To be more precise, the PopUp Window. For example:

dialog.vue -> price.vue

dialog.vue -> locations.vue

dialog.vue -> services_pricelist.vue