Vue

HTML

<div id="sidebar">
    <manager-tab
        :name="'Name'"
        :position="'AM'"
        :thumbnail="'https://via.placeholder.com/150x150'"
        v-on:activate-am-modal="activateAmModal"
    ></manager-tab>
    <manager-tab
        :name="'Name'"
        :position="'RM'"
        :thumbnail="'https://via.placeholder.com/150x150'"
        v-on:activate-am-modal="activateRmModal"
    ></manager-tab>
    <manager-modal 
        :is-active="showRmModal"
        :phone="'555-123-4567'"
        :full-name="'Full Name'"
        :email="'test@email.com'"
        :position="'RM'"
        :thumbnail="'https://via.placeholder.com/150x150'"
    ></manager-modal>
    <manager-modal 
        :is-active="showAmModal"
        :phone="'555-123-4567'"
        :full-name="'Full Name'"
        :email="'test@email.com'"
        :position="'AM'"
        :thumbnail="'https://via.placeholder.com/150x150'"
    ></manager-modal>
</div>

<template id="manager-modal">
  <div :class="{ 'modal-open' : isActive }" class="modal in" v-show="isActive">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal__header">
                    <img class="modal__profile-pic" :src="this.thumbnail" />
                    <div class="modal__contact-name">{{ this.name }}</div>
                    <div class="modal__contact-position">{{ this.position }}</div>

                    <div class="modal__contact-row">
                        <div class="modal__contact-phone">{{ this.phone }}</div>
                        <div class="modal__contact-separator">|</div>
                        <div class="modal__contact-email">{{ this.email }}</div>
                    </div>
                </div>
                <div class="modal-body">
                    <textarea class="modal__comment-block" placeholder="Send a message..." v-model="text"></textarea>
                </div>
                <div class="modal__footer">
                    <div...

SCSS

@mixin columnFlexContainer() {
	display					: flex;
	flex						: 1 0 auto;
	flex-direction  : column;
	justify-content : center;
	align-items     : center;
	align-content   : center;
	text-align      : center;
	width           : 100%;
}
@function em($target, $context: $base__font-size) {
	@return ($target / $context) * 1em;
}


.modal {
    @include e(basic) {
        @include columnFlexContainer();
        width               : em(420px);
        height              : em(485px);
        border-radius       : 6px;
        border              : solid 1px black;
    }

    @include m(close-btn) {
        flex                : 1 0 auto;
        width               : 17px;
        height              : 3px;
        transform           : rotate(45deg);
        border-radius       : 1px;
        background-color    : #fff;
        right               : 15px;
        top                 : 15px;
        position            : relative;
    }

    @include e(header) {
        @include columnFlexContainer();
        background          : url('../images/header.png');
        background-size     : cover;
        background-repeat   : no-repeat;
        border              : 1px solid #fff;
        border-radius       : 6px 6px 0 0;
        object-fit          : contain;
        padding-top         : em(25px);
        padding-bottom      : em(10px);
    }

    @include e(body) {
        display             : flex;
        justify-content     : center;
        align-content       : center;
        align-items         : center;
        padding             : 0;
    }

    @include e(profile-pic) {
        flex                : 1 0 auto;
        width               : 60px;
        height              : 60px;
        border-radius       : 40px;
        border              : 1px solid #fff;
        margin-bottom       : em(10px);
    }

    @include e(contact-name) {
        flex                : 1 0 auto;
        font-size           : 18px;
        color               : #fff;
     ...

Vue

Vue.component('manager-tab', {
  template: '#manager-tab',
	props: {
      name      : '',
      phone     : '',
      fullName  : '',
      email     : '',
      position  : '',
      thumbnail : ''
    },
    methods: {
      emit: function() {
        if (this.position == "Regional Manager") {
          this.$emit('activate-rm-modal');
        } else {
          this.$emit('activate-am-modal');
        }
      }
    },
});

Vue.component('manager-modal', {
    template: '#manager-modal',
    data() {
      return {
        isModalOpen: this.isActive,
        msg: '',
        personName: '',
        personPhone: '',
        personMessage: '',
        modalHeader: 'Message Sent',
        modalBody: 'Your message has been sent! <br><br>Thank you for taking the time to inquire. Someone will reach out to you as soon as possible.',
        text: '',
      }
    },
    props: {
        phone       : '',
        fullName    : '',
        email       : '',
        position    : '',
        thumbnail   : '',
        isActive    : false
    },
    methods: {
        close: function() {
            this.isActive = !this.isActive;
        },
        sendMessage: function() {
            if (this.text) {
                console.log(this.text);
                this.personMessage = this.text;
                this.sendInfoRequest();
            } else {
                console.error('No message text');
            }
        },
        sendInfoRequest: function() {
            console.log(this.personMessage);
            this.close();
        },
    },
});

new Vue({
  el: '#sidebar',
  data: {
    showRmModal: false,
    showAmModal: false,
  },
  methods: {
    activateRmModal: function() {
      this.showRmModal = true;
      this.showAmModal = false;
    },
    activateAmModal: function() {
      this.showAmModal = true;
      this.showRmModal = false;
    },
  },
});