How to remove the component when the page is fully loaded?

Question

Vue.js

Hello! When the page is fully loaded, I want to remove one component from the page and display another
In the created() event, I write
is_loaded (content): false, is_loaded_1 (spinner): true
Then in mounted () I write
is_loaded (content): true, is_loaded_1 (spinner) : false
Am I doing the right thing?
Code from App.vue:

<template>
  <div id="app">
    <hello v-show="is_loaded"></hello>
    <rotate-square2 v-show="is_loaded_1"></rotate-square2>
  </div>
</template>

<script>
  import {RotateSquare2} from 'vue-loading-spinner'
  import hello from './components/HelloWorld'

export default {

  name: 'app',
  components: {
    RotateSquare2,
    hello
  },
  data: () => ({
    is_loaded: false,
    is_loaded_1: true
  }),

  created() {
    console.log(this.is_loaded_1)
  },

  mounted() {
   is_loaded: false,
    is_loaded_1: true

    console.log(this.is_loaded_1)
  }
}
</script>

<style>
.spinner {
  width: 80px!important;
  height: 80px!important;
  margin: 200px auto;
}
</style>

Answer 1

You can use v-cloak like here: https://medium.com/vuejs-tips/v-cloak-45a05da28dc4

Answer 2

mounted() {
   this.is_loaded = true;
   this.is_loaded_1 = false;

    console.log(this.is_loaded_1)
  }