vuetify(単一コンポーネント)でのloading画面が表示できない

vuetify(単一コンポーネント)でのloading画面表示

以下のサイトのようにページに入った際にローディング画面を表示したいです。
https://littlethings.jp/blog/web/loading-animation

エラーは発生しないのですが,ローディング画面が表示できずロード中のページが見えてしまいます。

該当のソースコード

index.vue
1<template>
2<div class="container-fluid">
3  <div id="app" v-on:load="load" >
4  <div id="loader-bf" class="is-hide">
5    <div id="loader" class="is-hide">
6      <img src="~/assets/img/logo.png" >
7    </div>
8  </div>
9</div>
10
11  <v-app light>
12    <br>
13　・
14　・
15　・　
16　・
17  </v-app>
18 </div>
19</template>
20
21<script>
22export default{
23    methods:{
24    load:function(){
25    var bf=document.getElementById('loader-bf');
26    var loader=doucument.getElementById('loader');
27    /*ロード画面の非表示を解除*/
28    bf.classList.remove('is-hide');
29    loader.classList.remove('is-hide');
30    /*読み込み完了*/
31    window.addEventListener('load',stopload);
32    /*20秒たったら強制的にロード画面を非表示にする*/
33    setTimeout('stopload()',20000);
34  },
35  /*ロード画面を非表示にする*/
36  stopload:function(){
37    bf.classList.add('fadeout-bf');
38    loader.classList.add('fadeout-loader');
39  },
40},
41}
42</script>
43<style>
44/*ローディング画面作成*/
45/*非表示*/
46.is-hide{
47  display:none;
48}
49/*ローディング画面をフェードアウト*/
50.fadeout-bf{
51  transition-property: opacity;
52  transition-delay: .9s;
53  transition-duration: .8s;
54  opacity:0;
55  pointer-events:none;
56}
57/*ローダーをフェードアウト*/
58.fadeout-loader{
59  transition-property:opacity;
60  transition-delay: .9s;
61  transition-duration: .3s;
62  opacity:0;
63  pointer-events:none;
64}
65/*ローディング画面*/
66#loader-bf{
67  background:#ffffff;
68  height: 100%;
69  left:0;
70  position:fixed;
71  top:0;
72  width:100%;
73  z-index:100;
74}
75#loader{
76  heigth:120px;
77  left:50%;
78  margin-left:-60px;
79  margin-top:-60px;
80  position:fixed;
81  top:50%;
82  width:120px;
83}
84#loader img{
85  display:inline-block;
86}
87</style>
88