nuxt-childでkeep-aliveを有効にした時にdataを保持する

nuxt-child-keep-alive-sample.vue

<template>
  <div>
    <p>{{id}}</p>
    <div>{{profile}}</div>
  </div>
</template>
<script>
let cacheData = null;
export default {
  name: 'user-index',
  data() {
    if (cacheData) {
      return cacheData;
    }
    return {
      id: null,
      profile: null,
    };
  },
  methods: {
    load() {
      let { data } = await this.$axios.get('your-api');
      this.id = data.id;
      this.profile = data.profile;
    },
    beforeDestory() {
      // Called right before a Vue instance is destroyed. At this stage the instance is still fully functional.
      cacheData = null;
    },
    created() {
      // Called synchronously after the instance is created.
      this.load();
    },
    deactivated() {
      // Called when a kept-alive component is deactivated.
      if (!cacheData) {
        cacheData = JSON.parse(JSON.stringify(this._data));
      }
    },
    activated() {
      // Called when a kept-alive component is activated.
    },
  },
}
</script>