How to work with components in vue.js?

Question

Vue.js

Good afternoon!
How to work with properties and methods of the connected StoreModalComponent component?
I try through StoreModalComponent.showModal = true; but it throws an error

<template>
    <div>
        <button @click="openStore">Открыть склад</button>
        <store-modal-component></store-modal-component>
    </div>
</template>
<script>
    import StoreModalComponent from './StoreModalComponent'
    import axios from 'axios'
    export default {
        data() {
            return {}
        },
        components: {
            StoreModalComponent
        },
        mounted: function () {},
        computed: {},
        methods: {
            openStore: function() {
                StoreModalComponent.showModal = true;
            },
        },
        watch: {},
    }
</script>

StoreModalComponent component code

<template>
    <div>
        <transition name="modal">
            <div class="modal-mask" v-if="showModal" @close="showModal = false">
                <div class="modal-wrapper">
                    <div class="modal-container">

                        <div class="modal-header">
                            <slot name="header">
                                Склад

                                <button class="modal-default-button" @click="$emit('close')">
                                    &times;
                                </button>
                            </slot>
                        </div>

                        <div class="modal-body">
                            <slot name="body">

                            </slot>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                showModal: false
            }
        },
        methods: {}
    }
</script>

Answer 1

1. In the StoreModalComponent component, remove showModal from data and move it to props:
   

   export default {
     props: {
       showModal:{ type: Boolean, default: false }
     }
   }

   
   
2. In the parent component, create the showModal data property and subscribe the newly created props of the StoreModalComponent component to it:
   

   <template>
     <store-modal-component :show-modal="showModal" />
   </template>