title: How to destroy/unmount vue.js 3 components?
body: <p>I have a fairly large <strong>vue.js 2</strong> application that has a dynamic tabs mechanism. Users can interact with the application opening and closing tabs, each tab represents a route. To achieve this I'm using vue router and keep alive, like the example bellow.</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;keep-alive&gt;
        &lt;router-view :key=&quot;routerViewKey&quot;/&gt;
      &lt;/keep-alive&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>When users click the close tab button, the <code>$destroy</code> function is called to remove its component from the cache. I'm migrating this application from vue 2 to vue 3, however, reading the breaking changes <a href="https://v3-migration.vuejs.org/breaking-changes/#other-minor-changes" rel="nofollow noreferrer">documentation</a> for vue.js 3 we can see this:</p>
  <blockquote>
  <p><strong>Removed APIs</strong></p>
  <p><code>$destroy</code> instance method. Users should no longer manually manage the
  lifecycle of individual Vue components.</p>
  </blockquote>
  <p>I didn't find any alternatives so far, so how can I programmatically destroy/unmount a cached component inside keep-alive in <strong>vue.js 3</strong>?</p>
  <p><strong>Edit 1 (Apr/22)</strong>: So far it's still impossible to achieve what <code>$destroy</code> did on vue.js 2 in vue.js 3. There is currently a RFC to solve this issue (<a href="https://github.com/vuejs/rfcs/discussions/283" rel="nofollow noreferrer">https://github.com/vuejs/rfcs/discussions/283</a>), but unfortunately it's opened for more than a year without any feedback.</p>