<template>
  ...
  <input type="text"
         v-model="fiveKmRaceTime"
         v-bind:class="{
          'form-control': true,
          'is-invalid': this.invalidRaceTime }"
         placeholder="A recent 5K race time, like 21:30" />
  <div class="invalid-feedback">{{ this.raceTimeValidationMessage }}</div>
  ...
</template>
...
<script>
export default {
  name: 'RunbyPace',
  ...
  computed: {
    missingRaceTime() {
      return this.submitted && this.fiveKmRaceTime === '';
    },
    invalidRaceTime() {
      return this.missingRaceTime ||
       (this.submitted && !this.lib.validTime(this.fiveKmRaceTime));
    },
    raceTimeValidationMessage() {
      if (this.missingRaceTime) {
        return 'Don\'t forget your 5K race time';
      }
      if (this.invalidRaceTime) {
        return `'${this.fiveKmRaceTime}' is not a valid race time. Try 21:44.`;
      }
      return '5K Valid';
    },
  }
  ...
</script>