vue-modal.js

 <!-- Setup the trigger --> 
<button style="background: #59A7BE; color: white; border: white;" class="button modal-button" data-target="modal-id" @click="launchProfileModal()">View Profile</button>  

<!-- Setup the modal -->     
    <div id="modal-id" class="modal modal-fx-fadeInScale"  v-bind:class="{'is-active': paymentsModalIsActive }">
        <div class="modal-background"> </div>
            <div class="modal-content" style="width: 80%;">
                <div class="box">
                    <div class="content has-text-centered">
                      
                    </div>
                </div>
                <button style="background: #59A7BE;" @click="closePaymentsModal()" class="modal-close is-large" aria-label="close"></button>
            </div>
        </div>

<!-- Setup the logic --> 
export default {
  name: 'app',
  components: { 
      NavigationBar
  }, 
  methods: { 
    launchLoginModal: function() {
      this.loginModalIsActive = true;
    },
    closeLoginModal: function() {
      this.loginModalIsActive = false;
    },
  },
   data() { 
    return { 
      loginModalIsActive: false, 
    } 
   }   
}