How to correctly implement a conditional preloader in vue?

Question

JavaScript

There is such a code

<template>
    <div v-if="$store.getters.list">
      <List>появится после выполнения асинхронного запроса</List>
    </div>
    <div v-else>
      <Preloader v-if="$store.state.loader">индикатор загрузки</Preloader>
      <div v-if="!$store.state.loader">Не удалось загрузить данные с сервера</div>
    </div>
  </template>

- here we get a list of some items that will come after the request is made to the server. That is, the page opens and a request to the server immediately occurs, after which the data is written to the list of vuex getters.
Otherwise, another block is shown, in which there is a preloader and static information in case, for some reason, the request to the server did not work

<Preloader v-if="$store.state.loader">индикатор загрузки</Preloader>

is a separate component with a loading indicator that is shown at the beginning of the request and hidden after the request is completed. That is, state vuex has a loader property that changes to true / false depending on whether the request to the server has completed or not

<div v-if="!$store.state.loader">Не удалось загрузить данные с сервера</div>

- this block just contains the information that should be shown if nothing came in the request / the request was not executed.

This works now, but the question is, is such an implementation normal or is there a way to do something more concise than writing a construction step with v-else

<div v-else>
      <Preloader v-if="$store.state.loader">индикатор загрузки</Preloader>
      <div v-if="!$store.state.loader">Не удалось загрузить данные с сервера</div>
    </div>