Question: I'm trying to write a code to do the following:

1. Using text-to-columns,the data should get divided in different columns.
The data in Cells A1-A8 is like this:

[![enter image description here](https://i.stack.imgur.com/uqIgn.png)](https://i.stack.imgur.com/uqIgn.png)

This data should appear in different columns.

Answer: 
When you log in or log out from 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>

```
I had similar problem and one simple solution I found was to force reload the web application via `location.reload()`, which clears the `keep-alive`. 

You might also find this discussion interesting: <https://github.com/vuejs/vue/issues/6259>