vue.jsのローディング画面の実装について

ヘッダーや記事を表示させる前にローディング画面の表示を実装しましたが、全てロードが完了する前にローディング画面が消えて、ヘッダーや記事が表示されてしまいます。
以下に実装したコードを載せます。
記事(画像＋文字)が全てロードが完了してから表示させたいです。(UX的に見栄え良くするため)
よろしくお願いいたします。

vue.js
1<template>
2  <div>
3    <div ref="loading" id="loading">
4      <img src="https://www.wp-master.club/wp-content/uploads/2018/10/loading.gif" alt="loading">
5    </div>
6    <div ref="app" class="hidden">
7      <Header/>
8      <ArticleCard/>
9    </div>
10  </div>
11</template>
12
13<script>
14  import ArticleCard from "./components/ArticleCard";
15  import Header from "./components/Header";
16  export default {
17    name: 'App',
18    components: {
19      Header,
20      ArticleCard,
21    },
22
23    mounted() {
24      let loading =  this.$refs.loading;
25      let app = this.$refs.app;
26      onload = function() {
27        loading.style.display = 'none';
28        app.classList.remove('hidden');
29      };
30    }
31  };
32</script>
33
34<style>
35  #loading {
36    width: 100%;
37    height: 100vh;
38    background-color: #fff;
39    position: relative;
40  }
41  #loading img {
42    position: absolute;
43    top: 50%;
44    left: 50%;
45    transform: translate(-50%, -50%);
46  }
47  .hidden {
48    display: none;
49  }
50</style>
51