med-appointments/src/components/VaccinationDetails.vue

<template>
  <div v-if="!vaccination">
    <p>No vaccination details found.</p>
  </div>
  <div v-else>
    <h2>Vaccination Details</h2>
    <!-- NOTE: These values should probably have dates or some kind of
         structured data, or lists/arrays of said data.-->
    <!-- TODO: Add more details.
         See also: https://www.cdc.gov/vaccines/imz-managers/laws/index.html -->
    <p>Measles: {{ vaccination.measles }}</p>
    <p>Mumps: {{ vaccination.mumps }}</p>
    <p>Rubella: {{ vaccination.rubella }}</p>
  </div>
</template>

<script>
export default {
  name: "VaccinationDetails",
  props: ["vaccination"]
};
</script>