Vue 路由切换后组件节点未回收，如何解决内存泄露？

Question

vue 组件 节点泄露问题

先描述下我的路由信息

/common 指向 common.vue

/list 指向 list.vue

源码如下

• App.vue

  <template>
  <div id="app">
    <el-button @click="common">common</el-button>
    <el-button @click="list">list</el-button>
    <router-view/>
  </div>
  </template>
  <script>
  export default {
  methods: {
    common () {
      this.$router.push({ path: '/common' })
    },
    list () {
      this.$router.push({ path: '/list' })
    }
  }
  }
  </script>
  <style lang="scss">
  
  </style>

• common.vue

  <template>
  <div>
    common
  </div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style lang="scss" scoped>
  
  </style>

• list.vue

  <template>
  <div>
    <el-button @click="toggle">切换</el-button>
    <Child ref="child" @close="close" v-if="show"/>
  </div>
  </template>
  
  <script>
  import Child from './child'
  export default {
  components: {
    Child
  },
  data () {
    return {
      show: false
    }
  },
  methods: {
    toggle () {
      this.show = !this.show
    },
    open () {
      this.show = true
    },
    close () {
      this.show = false
    }
  }
  }
  </script>
  
  <style lang="scss" scoped>
  
  </style>

• child.vue

  <template>
  <div class="child">
    <div :key="`${renderKey}-${item}`" v-for="item in 1000">123</div>
  </div>
  </template>
  
  <script>
  export default {
  data () {
    return {
      renderKey: Math.random()
    }
  },
  methods: {
    click () {
      this.$emit('close')
    }
  }
  }
  </script>
  
  <style lang="scss" scoped>
  
  </style>

操作步骤

1.切换到 list.vue 页面的 初始节点 488 个

2.点击切换 按钮,渲染 child 组件
节点上升到 2496 个

3.然后跳转路由到 /common,手动回收

发现节点没有被正常回收

怀疑是 child 组件内存泄露,但是找不到具体原因,望各位大佬指教!