How to get data before component render?

Question

JavaScript

There is a component that displays the results in the form of a table. The problem is that an empty table is rendered first, and then data is added. How to make table output after getting data?

<template>
  <div>
    <!-- <p>Count: {{ brandsCounter }}</p> -->
    <el-table :data="getAllBrands">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column>
        <template slot-scope="props">
          <el-button type="danger" icon="el-icon-delete" @click="deleteBrand(props.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

    <script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "BrandsTable",
  computed: {
    ...mapGetters(["getAllBrands"])
  },
  methods: {
    ...mapActions(["requestBrands", "deleteBrand"])
  },
  mounted: function() {
    this.requestBrands();
  }
};
</script>

Vuex

import store from "..";

export default {
  state: {
    all: []
  },
  getters: {
    getAllBrands: state => {
      return state.all;
    }
  },
  mutations: {
    setBrands(state, brands) {
      state.all = brands;
    },
    deleteBrandFromList(state, brandId) {
      state.all = state.all.filter(b => b.id !== brandId);
    }
  },
  actions: {
    async requestBrands(ctx) {
      await axios
        .get("/admin/brands", {
          _token: store.state.token
        })
        .then(function(response) {
          ctx.commit("setBrands", response.data.brands);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    async deleteBrand(ctx, id) {
      await axios
        .post("/admin/brands/" + id, {
          _token: store.state.token,
          _method: "DELETE"
        })
        .then(function() {
          ctx.commit("deleteBrandFromList", id);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};

Answer 1

//
<ElTable
  v-if="getAllBrands.length > 0"
  :data="getAllBrands"
>
//

Answer 2

<el-table
  v-if="getAllBrands.length"
  :data="getAllBrands"
>