I have an AngularJS application where I'm using few components of Vue (version 2).

The Navigation bar of the app is in AngularJS.

When I switch between different navigation options (Home/Support), I'm loading the related Vue components.

VueJS project is built using npm run buid-lib and linked in angularJS app (npm link). Library name is myVueApp.

Using ngVue library to integrate Vue with AngularJS.

Code to load Vue Components in AngularJS app (as plugin):

(function() {
'use strict';

if (typeof myVueApp !== 'undefined') {
    var VueContainer = myVueApp.components.VueContainer,
        plugins = myVueApp.plugins;
}

angular
    .module('my.vue.config', ['ngVue', 'ngVue.plugins'])
    .config(function($ngVueProvider) {
        $ngVueProvider.setRootVueInstanceProps(plugins);
    })

    // Add Vue components here
    .value('VueContainer', VueContainer);
})();

In HTML page, I'm loading the component like below example:

Home.Html (In AngularJS)

<div>
     <vue-component name="VueContainer"></vue-component>
</div>

Routing of the Vue Components in Angular Controller:

var ngModule = angular.module('home.content', ['ui.router']);
ngModule.config(function ($stateProvider) {
$stateProvider
  .state('home.content', {
    url: '?home&t',
    controller: 'HomeCtrl as HomeCtrl ',
    templateUrl: '/views/home.html',
    resolve: {
     
    },
    onEnter: function(){

    }
});

When I switch between Vue Components, the Created/Mounted event of the each Vue component (callee and called) is getting called.

Example Vue Components:

HomeComponent.Vue

  async created() { //This is called every time it is switched to other component
       await this.getHomeData();
       this.loading = false;
}

SupportComponent.Vue

  created() { //This is called every time it is switched to other component
      this.$store.dispatch('getAllSupportProp');
      this.loadDetails();
}

In angular app, when I swtich from HomeComponent.Vue to SupportComponent.Vue or vice-versa, created/mounted events of both the components are getting called while it should only call the target component's created event.

When I run the Vue app alone (not with AngularJS), the switching between components doesn't have this problem (Callee component doesn't get called).