Vue之 点击刷新当前页面报组件name的错

情景：点击刷新当前tab页面，目前使用正常但是有报错，信息如下

[Vue warn]: Unknown custom element: <el> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <HeaderRefresh> at src/components/HeaderRefresh/index.vue
       <Navbar> at src/layout/components/Navbar.vue
         <Layout> at src/layout/index.vue
           <App> at src/App.vue
             <Root>

1、调用

<HeaderRefresh id="header-refresh"  class="right-menu-item hover-effect"/>
import HeaderRefresh from '@/components/HeaderRefresh'
components: {
        HeaderRefresh,
  },

2、使用

<template>
  <div  class="header-refresh">
         <el class="avatar-container right-menu-item hover-effect" @click="refresh" ><i class="el-icon-refresh"></i></el>
  </div>
</template>
<script>
import Fuse from 'fuse.js'
import path from 'path'
import i18n from '@/lang'
export default {
    inject: ['reload'],
  name: 'HeaderRefresh',
     provide (){
        return {
        }
      },
  data() {
    return {
      showRouter: true
    }
  },
  methods: {
                 refresh() {
                      this.reload()
                    }
  }
}
</script>
——APP.vue——
<template>
   <div id="app">
     <router-view v-if="showRouter" ></router-view>
   </div>
 </template>
 
 <script>
 export default {
   name: 'App',
   provide (){
     return {
       reload: this.reload
     }
   },
   data (){
     return {
       showRouter: true
     }
   },
   methods: {
     reload (){
       this.showRouter = false
       this.$nextTick(function(){
         this.showRouter = true
       })
     }
   }
 }
 </script>

https://blog.csdn.net/qq_39835505/article/details/122191945