Why do you load the components, f7 and vuejs several times?

Questions
#1

Good afternoon dear, I have the following error, loads the components several times:
The steps have to make so that me of the error are the following:

  1. Login
  2. Join message view (load component messages. Vue, which has a console.log for an array)
    3 .I close session
  3. Again, login (At that moment to see through the console loads the component messages.vue, which should not be so since I have not entered the messages view)
    5.In the same way entry to view messages (all normal, print the array)
    6.Session closure.
  4. Login. (At this moment, he has loaded messages twice. I have not entered the messages view).
    and so on, if I re-enter messages. The next time I close and log in I load the messages component 3 times.

This happens to me with every view of the project.

The main.js file where vue initializes:

    var firebaseConfig = {
          apiKey: "asdasd",
          authDomain: "asdasdada",
          databaseURL: "asdasda",
          projectId: "sasdasdasd",
          storageBucket: "sasdasdm",
          messagingSenderId: "asdasdad",
          appId: "1:asdasdad:web:asdadd"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);

// Init Vue App
    export default new Vue({
      // Root Element
      el: '#app',
      store,
      render: c => c('app'),
      components: {
        app
      },
      mounted() {
        window.addEventListener('load', () => {
            // run after everything is in-place
            FastClick.attach(document.body);
        });
      },
    });

function close session in another component.

>     cerrarSesion(){    

    let vm = this;
    firebase.auth().signOut(); //Solo me interesa cerrar sesión en firebase
    vm.$f7router.navigate('/login/'); 
    },

main.vue:

<template>
    <!-- App -->
    <f7-app :params="f7params">
        <f7-view url="/" :main="true"  links-view=".view-main" :pushState="true"></f7-view>
    </f7-app>
</template>
<script>
// Import Routes...
import {f7Tabs, f7Tab, f7Link, f7Toolbar, f7App, f7Panel, f7View, f7Statusbar, f7Button, f7Col, 
        f7Page, f7Navbar, f7Block, f7Row } from 'framework7-vue';
import routes from './routes.js';


export default {
    components: {
      f7App,
      f7Panel,
      f7View,
      f7Statusbar,
      f7Button,
      f7Col,
      f7Block,
      f7Page,
      f7Row,
      f7Navbar,
      f7Toolbar,
      f7Link,
      f7Tabs,
      f7Tab
    },
    data() {
        return {
            f7params: {
                id: 'com.terabit.servido',
                routes,
                scroll: true,         
                touch: {
                    tapHold: true, 
                    materialRipple: true, 
                    activeState: true, 
                    disableContextMenu: false,
                }
            }
        }
    }
}
</script>

Route.js:

import Home from './assets/vue/pages/home.vue';
import AboutPage from './assets/vue/pages/about.vue';
import FormPage from './assets/vue/pages/form.vue';
import DynamicRoutePage from './assets/vue/pages/dynamic-route.vue';

import PanelLeftPage from './assets/vue/pages/panel-left.vue';
import ColorThemes from './assets/vue/pages/color-themes.vue';
import Chat from './assets/vue/pages/chat.vue';
import Vuex from './assets/vue/pages/vuex.vue';
import VistaNectar from './assets/vue/pages/vistanectar.vue';
import Login from './assets/vue/pages/login.vue';
import RegistrarCuenta from './assets/vue/pages/registrarCuenta.vue';
import RecuperarPass from './assets/vue/pages/recuperarpass.vue';
import Trabajos from './assets/vue/pages/trabajos.vue';

import Perfil from './assets/vue/pages/perfil/perfil.vue';
import Politicas from './assets/vue/pages/perfil/politicas.vue';
import Contactenos from './assets/vue/pages/perfil/contactenos.vue';
import PreguntasFrecuentes from './assets/vue/pages/perfil/preguntasfrecuentes.vue';
import Ayuda from './assets/vue/pages/perfil/ayuda.vue';
import ComentarioServido from './assets/vue/pages/perfil/comentarioservido.vue';
import TerminoServicios from './assets/vue/pages/perfil/terminoservicios.vue';
import InfoPersonal from './assets/vue/pages/perfil/infopersonal.vue';
import PagosCobros from './assets/vue/pages/perfil/pagoscobros.vue';



import Noticias from './assets/vue/pages/noticias.vue';
import DetalleNoticia from './assets/vue/pages/detallenoticia.vue';
import Entrar from './assets/vue/pages/entrar.vue';
import AyudaDoc from './assets/vue/pages/ayudadoc.vue';
import Informacion from './assets/vue/pages/informacion.vue';
import TerminoPagoSuscripcion from './assets/vue/pages/terminopagosuscripcion.vue';
import DocOficial from './assets/vue/pages/docoficial.vue';
import TipoDocumentoOficial from './assets/vue/pages/tipodocumento.vue';
import FotoDoc from './assets/vue/pages/fotodoc.vue';
import ContacEmergencia from './assets/vue/pages/contacemergencia.vue';
import NoContacEmergencia from './assets/vue/pages/nocontacemergencia.vue';
import MetodosPagos from './assets/vue/pages/metodospagos.vue';
import NotFound from './assets/vue/pages/notfound.vue';
import PerfilPublico from './assets/vue/pages/perfilPublico.vue';

import CategoriasGeneral from './assets/vue/pages/categorias/categoriasgeneral.vue';
import SubCategoria from './assets/vue/pages/categorias/subcategorias.vue';
import UsuariosCategoria from './assets/vue/pages/categorias/UsuariosCategorias.vue';
import PrimerMensaje from './assets/vue/pages/categorias/primermensaje.vue';

import Mensajes from './assets/vue/pages/chat/mensajes.vue';
import Conversacion from './assets/vue/pages/chat/conversacion.vue';

import Licitaciones from './assets/vue/pages/licitaciones/licitar.vue';
import OfertasLicitaciones from './assets/vue/pages/licitaciones/ofertaslicitaciones.vue';
import DetalleOferta from './assets/vue/pages/licitaciones/detalleoferta.vue';
import LicitacionesGeneral from './assets/vue/pages/licitaciones/licitacionesgeneral.vue';
import DetalleLicitacion from './assets/vue/pages/licitaciones/detallelicitacion.vue';
import EnviarOferta from './assets/vue/pages/licitaciones/enviaroferta.vue';


export default [
  {
    path: '/',
    component: Home,
    tabs: [
        {
          path: '/',
          id: 'tab-1',
          component: CategoriasGeneral
        },
        {
          path: '/licitacionesgeneral',
          id: 'tab-1-2',
          component: LicitacionesGeneral
        },
        {
          path: '/trabajos/',
          id: 'tab-2',
          component: Trabajos
        },
        {
          path: '/licitar/',
          id: 'tab-3',
          component: Licitaciones
        },
        {
          path: 'mensajes/',
          id: 'tab-4',
          component: Mensajes
        },
        /*{
          path: 'noticias/',
          id: 'tab-5',
          component: Noticias
        },*/
        {
          path: '/perfil/',
          id: 'tab-6',
          component: Perfil
        },
        {
          path: '/entrar/',
          id: 'tab-7',
          component: Entrar
        },
      ],
  },
  {
    path: '/about/',
    component: AboutPage
  },
  {
    path: '/form/',
    component: FormPage
  },
  {
    path: '/dynamic-route/blog/:blogId/post/:postId/',
    component: DynamicRoutePage
  },
  {
    path: '/panel-left/',
    component: PanelLeftPage
  },
  {
    path: '/color-themes/',
    component: ColorThemes
  },
  {
    path: '/chat/',
    component: Chat
  },
  {
    path: '/vuex/',
    component: Vuex
  },
  {
    path: '/vistanectar/',
    component: VistaNectar
  },
  {
    path: '/login/',
    component: Login
  },
  {
    path: '/registrarCuenta/',
    component: RegistrarCuenta
  },
  {
    path: '/recuperarpass/',
    component: RecuperarPass
  },
  {
    path: '/noticias/',
    component: Noticias
  },
  {
    path: '/articulo/:id',
    component: DetalleNoticia
  },
  {
    path: '/contactenos/',
    component: Contactenos
  },
  {
    path: '/politicas/',
    component: Politicas
  },
  {
    path: '/FAQ/',
    component: PreguntasFrecuentes
  },
  {
    path: '/ayuda/',
    component: Ayuda
  },
  {
    path: '/ayudadoc/',
    component: AyudaDoc
  },
  {
    path: '/informacion/',
    component: Informacion
  },
  {
    path: '/terminoservicios/',
    component: TerminoServicios
  },
  {
    path: '/terminopagosuscripcion/',
    component: TerminoPagoSuscripcion
  },
  {
    path: '/comentarioservido/',
    component: ComentarioServido
  },
  {
    path: '/infopersonal/',
    component: InfoPersonal
  },
  {
    path: '/pagoscobros/',
    component: PagosCobros
  },
  {
    path: '/docoficial/',
    component: DocOficial
  },
  {
    path: '/tipodocumento/',
    component: TipoDocumentoOficial
  },
  {
    path: '/fotodoc/',
    component: FotoDoc
  },
  {
    path: '/contacemergencia/',
    component: ContacEmergencia
  },
  {
    path: '/nocontacemergencia/',
    component: NoContacEmergencia
  },
  {
    path: '/metodospagos/',
    component: MetodosPagos
  },
  {
    path: '/servido/:id',
    component: PerfilPublico
  },
  {
    path: '/conversacion/:id/:idjefe/:idoferta/:idservidor',
    component: Conversacion
  },
  {
    path: '/subcategorias/:idcategoria',
    component: SubCategoria
  },
  {
    path: '/usuarioscategoria/:categoria',
    component: UsuariosCategoria
  },
  {
    path: '/ofertaslicitacion/:licitacion',
    component: OfertasLicitaciones
  },
  {
    path: '/detalleoferta/:idoferta',
    component: DetalleOferta
  },
  {
    path:'/detallelicitacion/:idlicitacion',
    component: DetalleLicitacion
  },
  {
    path:'/enviaroferta/:idlicitacion',
    component: EnviarOferta
  },
  {
    path: '/nuevomensaje/:idservidor',
    component: PrimerMensaje
  },
  {
    path: '(.*)',
    redirect: '/'
  }
];

home.vue
> 

        <f7-page>
            <!--<toolbarbottom></toolbarbottom>-->
             <f7-statusbar></f7-statusbar>
             <f7-toolbar tabbar labels class="toolbar-bottom-md bg-color-cyan-9">
              <f7-link tab-link route-tab-id="tab-1" v-if="pagina_principal == '1'" href="/">
                <f7-icon icon="fas fa-home" size="20px"></f7-icon>
                <span class="tabbar-label">Home</span>
              </f7-link>
              <f7-link tab-link route-tab-id="tab-1-2" v-else href="/licitacionesgeneral">
                <f7-icon icon="fas fa-home" size="20px"></f7-icon>
                <span class="tabbar-label">Home</span>
              </f7-link>
              <f7-link tab-link route-tab-id="tab-2" href="/trabajos/">
                <f7-icon icon="fas fa-briefcase" size="20px"></f7-icon>
                <span class="tabbar-label">Ofrecer</span>
              </f7-link>
              <f7-link tab-link route-tab-id="tab-3" href="/licitar/">
                <f7-icon icon="fas fa-cart-plus" size="20px"></f7-icon>
                <span class="tabbar-label">Licitar</span>
              </f7-link>
              <f7-link tab-link route-tab-id="tab-4" href="/mensajes/">
                <f7-icon icon="fas fa-comments" size="20px"></f7-icon>
                <span class="tabbar-label">Mensajes</span>
              </f7-link>
              <!--<f7-link tab-link route-tab-id="tab-5" href="/noticias/">
                <f7-icon icon="far fa-newspaper" size="20px"></f7-icon>
                <span class="tabbar-label">Noticias</span>
              </f7-link>-->
              <f7-link tab-link route-tab-id="tab-6" href="/perfil/" v-if="logueado">
                <f7-icon icon="fas fa-user" size="20px"></f7-icon>
                <span class="tabbar-label">Perfil</span>
              </f7-link>
              <f7-link tab-link route-tab-id="tab-7" href="/entrar/" v-else>
                <f7-icon icon="fas fa-user" size="20px"></f7-icon>
                <span class="tabbar-label">Entrar</span>
              </f7-link>
            </f7-toolbar>
              
            <f7-tabs routable>
               <f7-tab id="tab-1"></f7-tab>
               <f7-tab id="tab-1-2"></f7-tab>
               <f7-tab id="tab-2"></f7-tab>
               <f7-tab id="tab-3"></f7-tab>
               <f7-tab id="tab-4"></f7-tab>
               <!--<f7-tab id="tab-5"></f7-tab>-->
               <f7-tab id="tab-6"></f7-tab>
               <f7-tab id="tab-7"></f7-tab>
            </f7-tabs>

            <f7-block>
                <f7-popup class="demo-popup" :opened="popupOpened" @popup:closed="popupOpened = false">
                        <f7-navbar class="text-color-black bg-color-white" title="SERVIDO">
                            <f7-nav-right>
                                <f7-link popup-close icon="fas fa-times" icon-color="black" icon-size="30px"></f7-link>
                            </f7-nav-right>
                        </f7-navbar>
                        <div style="height: 80%" class="display-flex justify-content-center align-items-center">
                            <f7-block>
                                <f7-row no-grap>
                                    <f7-col>
                                        <f7-link  href="/login/" popup-close icon="far fa-handshake" icon-size="85px" icon-color="black"></f7-link>
                                    </f7-col>
                                    <f7-col>
                                        <f7-link  href="/login/" popup-close icon="fas fa-business-time" icon-size="85px" icon-color="black"></f7-link>
                                    </f7-col>
                                </f7-row>
                            </f7-block>
                        </div>
                </f7-popup>
            </f7-block>
        </f7-page>
    </template>
    <script>
    import firebase from 'firebase';
    import {f7View, f7Row, f7Button, f7Col, f7Popup,f7Toolbar, f7Tabs, f7Tab, f7Page, f7Block, f7Navbar, 
            f7NavLeft, f7NavTitle, f7NavTitleLarge, f7NavRight, f7BlockTitle, f7List, f7ListItem, 
            f7Link, f7Searchbar, f7Icon, f7Statusbar } from 'framework7-vue';
    import toolbarbottom from 'assets/vue/pages/toolbarBottom.vue';  
      export default {
        components: {
          f7Page,
          f7Navbar,
          f7NavLeft,
          f7NavTitle,
          f7NavTitleLarge,
          f7NavRight,
          f7BlockTitle,
          f7List,
          f7ListItem,
          f7Link,
          f7Searchbar,
          f7Icon,
          f7Block,
          f7Tabs,
          f7Tab,
          f7Toolbar,
          f7Popup,
          f7Col,
          f7Button,
          f7Row,
          f7View,
          toolbarbottom,
          f7Statusbar
        },
        data(){
            return {
                showMobileMenu: false,
                popupOpened: false,
                logueado: '',
                pagina_principal: ''
            }
        },
       created(){
            let vm = this;
            console.log("CREATED AT HOME.VUE");
            firebase.auth().onAuthStateChanged((usuario) => {
              if(usuario){
                vm.logueado = usuario;
              } 
            });
        },
        updated(){
          let vm = this;
          vm.pagina_principal = localStorage.getItem("pagina_principal"); //1 Categorias General, 2 Listado licitaciones
        },
        methods:{
          showToastColorGreen: function() {
            var self = this;
            self.$f7.toast.show({
                icon: '<i class="icon fas fa-lg fa-check"></i>',
                text: 'Neque porro quisquam est.',
                position: 'bottom',
                cssClass: 'toast-round bg-color-green',
                closeTimeout: 2000
            });
          },
           loguearse(){
                this.logueado = firebase.auth().currentUser;
                this.popupOpened = this.logueado ? false: true;
            }
        },
      };
    </script>

Actually I have no idea where I can have the error, because when using the function destroyed () component messages.vue is executed, which I understand at that time the component was destroyed. Thank you in advance for the time.

#2

There is something wrong in your logic? Do you have more complete example or better live example?

#3

Edit the question, adding the example of route.js, main.vue and home.vue (Where I have the tab views)

#4

Dear good afternoon, sorry for the inconvenience you will have some idea about the problem that I present in the project, in advance thank you very much for your time

#5

Not really, still would be good to see live more isolated issue, hard to figure out what is happening like that