vue.js - Programmatically destroy a component from other component -

in vue app particular components inrouter-view cached using <keep-alive></keep-alive> vue provides.

when user logs in posts.vue component cached said above

everything works fine.

now want destroy posts.vue component when user logs out.so posts.vue component re-renders when user logs in again

the log out button present in other component menu.vue , on click logic log out present in nenu.vue component

so how implement using vm.$destroy() method menu.vue component on posts.vue component

so main problem how control lifecycle of 1 component other

the docs warn using follows :,

in normal use cases shouldn’t have call method yourself.

prefer controlling lifecycle of child components in data-driven fashion using v-if , v-for.

but in case cant use v-if or v-show

or there better way use

when log in or log out child component, emit 'login' or 'logout' event respectively.

<template>   <div id="app">     <router-view name='login' @login="login=true"></router-view>     <router-view name='header' @logout="login=false"></router-view>     <keep-alive v-if="login">       <router-view name='write'></router-view>     </keep-alive>     <router-view name='management'></router-view>     <router-view name='account'></router-view>     <router-view name='statistics'></router-view>     <router-view name='view'></router-view>     <router-view name='password'></router-view>   </div> </template>  <script> export default {   name: 'app',   data () {     return {       login: true     }   } } </script>  <style> #app {   font-family: 'avenir', helvetica, arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 0;   height: 100%; } </style>