med-appointments/src/components/FinishAppointment.vue

<template>
  <div v-if="permission && unfinished">
    <button
      class="btn btn-lg btn-warning btn-block"
      @click="finishAppointment()"
    >
      Finish Appointment ⌛
    </button>
  </div>
</template>

<script>
export default {
  name: "FinishAppointment",
  props: ["keyId", "permission", "unfinished"],
  methods: {
    finishAppointment: function() {
      console.log("TODO");
    }
  }
};
</script>