[Vue 3] should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. 해결방법

이슈 

should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`

 

원인 

컴포넌트 참조 시 shallowRef 사용하지 않아서 발생

 

 

해결 방법

 

컴포넌트 참고를 shallowRef 사용하여 해결

import { shallowRef } from "vue";
import TodoPast from './TodoPast.vue';
...
...

export default{
   
   setup()
   {
   		 const prov_compt  = shallowRef(TodoPast);  
         ...
         ...
         ...
   }
}

 

 

<template>
	<keep-alive>
    	<component :is="prov_compt"/>
   	</keep-alive>
</template>