shallowRef Vue Component inside store

[JK-Effects]

Hi,

I am building a custom ContextMenu for which I am saving the state in pinia. So that I can display content in my ContextMenu, I am passing a Vue component as shallowref to the store.

Now to my problem:

In dev mode, pinia displays the component_ref state-variable as a null value in the dev tools. Even if I output the value in the UI, nothing is displayed. When I output the values in the openContextMenu function via the console, I do not get null values.
This happens when I pass a shallowRef component. If I pass the component directly, everything works. (The console warns against direct passing).
Sometimes the content is also displayed when I change a file and the app partially reloads.
If I build the application for production and then test it, shallowref works without problems.

Code:

store

import { defineStore } from "pinia";

export const useContextMenuStore = defineStore("context-menu", {
  state: () => {
    return {
      contextX: 0,
      contextY: 0,
      show: false,
      component_ref: null as any,
      data: null as any,
    };
  },
  getters: {
    contextMenuStyle: (state) => {
      return `left: ${state.contextX}px; top: ${state.contextY}px`;
    },
  },
  actions: {
    openContextMenu(e: MouseEvent, content: { component_ref: any; data: any }) {
      this.component_ref = content.component_ref;
      this.data = content.data;
      this.contextX = e.pageX;
      this.contextY = e.pageY;
      this.show = true;
      console.log(content.component_ref); //returns component
    },
    closeContextMenu() {
      this.component_ref = null;
      this.data = null;
      this.show = false;
    },
  },
});

Component to open ContextMenu

<template>
  <div
    @contextmenu.prevent="displayContext"
  >
    <p>Open Contextmenu</p>
  </div>
</template>

<script setup lang="ts">
import { shallowRef } from "vue";
import { mapState, mapActions } from "pinia";
import { useContextMenuStore } from "../../stores/context-menu";
import ContextMenuContent from "./ContextMenuContent.vue";
</script>

<script lang="ts">
export default {
  components: { ContextMenuContent},
  methods: {
    ...mapActions(useContextMenuStore, ["openContextMenu"]),
    displayContext($event: MouseEvent) {
      this.openContextMenu($event, {
        //component_ref: ContextMenuContent, <-- works in dev mode, but tiggers warning like show below
        component_ref: shallowRef(ContextMenuContent), // <-- does work in production mode and on file-change-reloads
        data: "my Context Menu",
      });
    },
  },
};
</script>

contextMenu

<template>
  <div
    ref="contextMenu"
    class="absolute flex flex-col border border-gray-400 bg-white rounded-md select-none text-left shadow-md z-50 px-2 p-1"
    v-show="show"
    :style="contextMenuStyle"
    @contextmenu.prevent
    @click="closeContextMenu"
  >
    <component :is="component_ref" :data="data" />
  </div>
</template>

<script setup lang="ts">
import { mapState, mapActions } from "pinia";
import { useContextMenuStore } from "../stores/context-menu";
</script>

<script lang="ts">
export default {
  computed: {
    ...mapState(useContextMenuStore, ["show", "contextMenuStyle", "component_ref", "data"]),
  },
  methods: {
    ...mapActions(useContextMenuStore, ["closeContextMenu"]),
  },
};
</script>

Warning:

Only if I do not use shallowRef
[Vue warn]: Vue received a Component which 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'.

Versions:

Vue: 3.3.4 (with typescript)
Vite: 4.4.9
Pinia: 2.1.6

Does anyone know why the component cannot be displayed in dev mode?