title: Programmatically destroy a component from other component
body: <p>In my vue app some particular components in<code>router-view</code> are cached by using <code>&lt;keep-alive&gt;&lt;/keep-alive&gt;</code> that vue provides.</p>
  <p>When a user logs in the <strong>posts.vue</strong> component is cached as I said above</p>
  <p>Everything works fine.</p>
  <p>Now I want to <strong>destroy</strong>  this <strong>posts.vue</strong> component when the user logs out.So that <code>posts.vue </code> component re-renders when the user logs in again</p>
  <p>The log out button is present in completely other component <code>menu.vue</code> and the on click logic for log out is present in this <code>nenu.vue</code> component</p>
  <p>So how could I implement this using <code>vm.$destroy()</code> method from <code>menu.vue </code> component on <code>posts.vue</code> component</p>
  <p><strong>so my main problem is how to control lifecycle of one component from the other</strong></p>
  <p>the <a href="https://v2.vuejs.org/v2/api/#vm-destroy" rel="nofollow noreferrer">docs</a> warn using this as follows :,</p>
  <p><strong>In normal use cases you shouldn’t have to call this method yourself.</strong></p>
  <p><strong>Prefer controlling the lifecycle of child components in a data-driven fashion using <code>v-if</code> and <code>v-for</code>.</strong></p>
  <p><strong>but in my case I cant use <code>v-if</code> or <code>v-show</code></strong></p>
  <p><em>or is there any better way i could use</em></p>