[Vue warn]: Unknown custom element: – did you register the component correctly? For recursive components, make sure to provide the “name” option. 제거하는 방법

메뉴를 클릭하거나 화면이동시 다음과 같은 경고 내용이 메뉴를 클릭할 때 마다 발생하는 경우가 있다.

[App.vue]

<template>
  <v-app>
    <component :is="curLayout">
      <keep-alive :exclude="viewArr">
        <router-view />
      </keep-alive>>
    </component>
  </v-app>
</template>

<script>

export default {
  components: {
  ....생략
  },
  computed: {
    ...mapState('theme', ['toast']),
    curLayout() {
      const layout = this.$route.meta.layout || 'default';
      return `${layout}Layout`;
    },
  },
  head: {
  },
  data: () => ({
    data: {
      cacheList: [
      ],
    },
    viewArr: [],
  }),
};
</script>

<style scoped>

</style>

[TestTemplate.vue]

<template>
  <div class="grow d-flex flex-column flex-nowrap">
    <v-layout row wrap class="mx-0">
      <v-flex xs12 sm5 md5 lg5 xl5>
        <component ref="primary"
		  :is="mainView"
          :style="`Height: ${flag.height}px`"          
          @eventHandler="eventHandler"
        />
      </v-flex>
      <v-flex
        id="secondary" class="pa-0 ma-0" xs12 sm7 md7 lg7 xl7
        :style="`maxHeight: ${flag.height}px`"
        >
        <component :is="subView" ref="secondary"
          @eventHandler="eventHandler"/>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>

export default {
  name: 'TestTemplate',
  components: {
  },
  data: () => ({
    params: {},
    flag: {
      isMobile: false,
      height: 0,
    },
    style: {
    },
  }),
  watch: {
  },
  created() {
    this.flag.height = document.body.clientHeight;
    this.flag.isMobile = this.$vuetify.breakpoint.xsOnly;
  },
  computed: {
    mainView: {
      get() {
        return this.$store.getters.getmainView;
      },
      set(value) {
        this.$store.commit('setmainView', value);
      },
    },
  },
  mounted() {
  },
  activated() {
    this.callAxios();
  },
  deactivated() {
    this.$destroy();
  },
  methods: {
    onResize() {
      this.flag.isMobile = this.$vuetify.breakpoint.xsOnly;
      this.flag.height = Math.min(document.body.clientHeight, window.innerHeight);
    },
    eventHandler(id, message) {
      ......생략
	  this.$refs.primary.eventHandler(id);
    },
  },
};
</script>

keep-alive를 사용중이여서 발생하는 오류이다. 
keep-alive를 임시적으로 비활성화 처리하면 워닝이 발생하지 않음을 확인할 수 있다.

[해결방법]

라이프사이클 중에 deactivated() 에서 $destory()메소드를 호출해주면 해결된다.

  deactivated() {
    this.$destroy();
  },

[연관자료]

• https://blog.jongallant.com/2019/03/vuejs-unknown-custom-element/
• https://yoonbh2714.blogspot.com/2020/10/vue-component.html
• https://kr.vuejs.org/v2/guide/components-registration.html#%EC%9D%B4%EB%A6%84-%ED%91%9C%EA%B8%B0%EB%B2%95
• https://stackoverflow.com/questions/49154490/did-you-register-the-component-correctly-for-recursive-components-make-sure-to