The mounted block from the vue template is executed even when the template is not used

Question

Such a problem: I created a login template with a login / password form, a function for authorization and a js function in the mounted section, which depicts a beautiful animation. Logically, at the moment of successful authorization, the entire login form, along with the animation, should disappear.

In the app.vue file the html looks like this

<div v-if="isCookies != '' "> 
     <login> </login>
</div>

The problem is that at the moment the isCookies variable is filled, the login form disappears, but the code from its mounted section is still executed and, not finding its canvas in the layout, throws errors into the console. When the page is reloaded, the login form is no longer displayed. cookies are set and the variable is filled, and errors are still pouring in, as if the template was not connected, but the mounted block is still taken from it and processed.

app.vue

<template>

  <div v-if="cookie==''">
     <login @login="login"></login>
  </div>

  <div class="main_window" v-else>
     Some text
  </div>
</template>

<style>
</style>

<script>
  import login from "@/views/login";
export default {
    data() {
       return { cookie:''} 
       },
    async mounted() {
       this.cookie=document.cookie;    
       },
    methods:{
       },
}
 </script>

login.vue

<template>
  <div class="login-panel">
    <input type="login" :placeholder="palceholders.login" @inputEvent="takeInputedLogin">

    </input>

    <br>

    <input type="password" :placeholder="palceholders.pass" @inputEvent="takeInputedPass">

    </input>

    <br>

    <button v-if="authData.login.length>6 && authData.pass.length>5" @click="tryToEnter" >
      телепортация
    </button>
  </div>
  <canvas id="particle-canvas"></canvas>
</template>

<script>
export default {
  name: "login",
  components: {

  },
  async mounted(){
    
   console.log("This code will work even when other part of template will not used. Even if the cookies are not empty on page load.")

  },
  data(){
    return{
      palceholders:{"login":"Name","pass":"Password"},
      authData:{"login":"","pass":""},
    }
  },
  methods:{
    takeInputedLogin(valued){
      this.authData.login=valued;
    },

    takeInputedPass(value){
      this.authData.pass=value;
    },

    tryToEnter(){
      this.$emit("login",this.authData);
    },

  }

}




</script>

<style scoped>

</style>

Answer 1

The monted is still running after the login form is removed from DOM. Try to add a boolean variable like this:

export default {
  data() {
    return {
      isLoggedIn: false,
      isAnimated: false,
  
    }
  },
  mounted() {
    if (this.isAnimated) {
      // animation code here
    }
  },
  methods: {
    login() {
      // authorization logic here
      this.isLoggedIn = true;
      this.isAnimated = true;

it's not the correctly but i believe it's works, if not working send your code here