gistfile1.txt

<section v-if="errored"> <!-- Se errored = true, mostra essa section com mensagem de erro -->
        <p class="text-center form-text">
          Pedimos desculpas, não estamos conseguindo recuperar as informações no
          momento. Por favor, tente novamente mais tarde.
        </p>
        <p class="text-center form-text">
          Por favor, entre em contato com a SESCO.
        </p>
      </section>

      <section v-else> 
        <div v-if="loading"> <!-- Caso errored = false e loading = true, mostra essa section -->
          <div class="d-flex justify-content-center">
            <div class="spinner-border mx-auto" role="status">
              <span class="visually-hidden">Carregando os dados...</span>
            </div>
          </div>
          <p class="text-center">Carregando os dados...</p>
        </div>

        <div v-else> <!-- Mostra os dados se tudo der certo -->
          <hr />
          <div class="text-center">
            <h3>Título:</h3>
            <p>{{ books.title }}</p>
            <h3>Descrição:</h3>
            <p>{{ books.body }}</p>
          </div>
        </div>
      </section>