How to display a server error in a component?

Question

css

<template>
  <b-form @submit.prevent="submitForm()">...</b-form>
  <span :v-if='error'>{{ error.message }}</span>
</template>
<script>
  export default {
    data () {
      return {
        error: ''
      }
    },
    methods: {
      async submitForm () {
        try {} catch (err) {
        this.error = err;
        }
      }
    }
  }
</script>

How do I output error.message to span without connecting second variable with true/false response for if

Answer 1

replace last-child with last-of-type

Answer 2

Because the last one is a div.
In general, according to the rules, only li can be in ul. The validator on the div swears.
https://validator.w3.org/

Answer 3

<span v-if='error'>{{ error.message }}</span>