[Vuejs]-How to make property in Vue component to be reactive

Add a watch to your prop:

Vue.component('my-component', {
    props: {
        displayed: {
            type: Boolean
        }
    },
    template: `
        <div v-bind:class="{'modal': true, 'auth-required': true, 'show-modal': isDisplayed }">
            <div class="modal__content">
                <img src="/img/popup/close.svg" v-on:click="displayed = false;" alt="close" class="modal__closeBtn modal__closeBtn-questions" />
                <slot></slot>
                <img src="/img/popup/dog.png" alt="dog" class="modal__contentImg" />
            </div>
        </div>`,
    data: function () {
        return {
            isDisplayed: this.displayed
        };
    },
    watch: {
        displayed(newValue) {
            // Update the data value
            this.isDisplayed = newValue;
        }
    }
})

Also, notice that I changed the ‘show-modal’ binding: 'show-modal': isDisplayed