点击菜单按钮切换显示页面，使用动态组件导致警告问题

环境：HBuildX 4.22-alpha，系统iOS，使用uni-app x进行开发。
业务场景：屏幕左侧有一列按钮(按钮个数不固定)，点击按钮时屏幕左侧显示的页面切换为按钮对应的页面。
当前实现方式：使用了动态组件<component>，当按钮切换时，动态组件会响应式发生变化；大致代码如下

<view class="content-view">  
    <component :is="currentComponent"></component>  
</view>  
export default {  
  data() {  
    return {  
        currentComponent: null,  
                compontents: [Compontent1, Compontent2]  
    };  
  },  
methods: {  
    // 按钮事件  
    toggleMenuSelection(index) {  
         this.currentComponent = this.compontents[index]  
    }  
}  
};

遇到问题：
问题1：上述代码可以实现我想要的效果，但是控制台有警告，说是通过响应式绑定组件实例会影响性能，信息如下，
问题2：每次切换按钮 Compontent1, Compontent2 组件都会重新生成实例，怎么可以不重新生成实例呢，使用keepAlive是不是常规手段。

13:49:40.267 [Vue warn]: Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.  
13:49:40.267 Component that was made reactive:  mounted: [object object]__file: /Users/apple/Documents/HBuilderProjects/MyUniapp/pages/spc/spcpage.uvue data: [object object]methods: [object object]created: [object object]render: [object object]  
13:49:40.267 at <Index __pageId=1 __pagePath="pages/index/index" __pageQuery=  ... >

想要问下，我上述的业务场景，在前端应该怎样实现才算比较常规的实现方式？本人之前一直搞iOS开发 对前端还不是很熟，希望大佬们指教