Shouldn't Components be marked with ReactiveFlag.SKIP? And script setup.

[jods4]

Today I saw this warning on my console:

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`. 

Source: https://github.com/vuejs/vue-next/blob/c0db807844194a227f6d0dad6cc3e1e8f148770f/packages/runtime-core/src/vnode.ts#L412-L418

It's a good warning because deep reactivity is insidious and can sometimes insert itself in unexpected places.

What happen here was that I have a datagrid that takes reactive columns definition, which contain a render option and I put a component in there.

This component is a <script setup> kind of component. I tried to add a second script block just to do export default markRaw({}) but it doesn't do the trick. I could markRaw where it's used but it's in a lot of places and that's weird. Remaining solution: a JS module to import the .vue component, mark it raw, and re-export? Quite overkill.

This all makes me wonder: does it even make any sense that Components can become reactive objects like that?
Instead of the warning, shouldn't Vue consider all Components as ReactiveFlag.SKIP by default?

Bonus tip if you read so far:
Be sure to slip a ReactiveFlag.SKIP into the prototype of objects that shouldn't be reactive but are commonly used in your data.
A typical example would be some kind of date object like Moment, Luxon or Dayjs.
You don't really want Vue going ahead and making all your dates reactive objects.

[bendytree]

This is a major pain point for migrating 800+ Vue 2 sfcs to Vue 3. A common pattern for us is:

const roles = reactive([
  { id: 'admin', viewer: ViewAdminComponent, editor: EditAdminComponent },
  { id: 'client', viewer: ViewClientComponent, editor: EditClientComponent },
  ...
]);

Marking every component is... not ideal. The warning should be avoided... leads me to think raw would be a better default. Alternatively, a hook before this warning (that would let us mod a component as needed) would be a more flexible option.

For now, we're hijacking the webpack resolver before the page initializes.

((modules) => {
  const handler = function (key, ...args) {
    const base = this;
    base.apply(base, args);
    const component = args[0]?.exports?.default;
    const isComponent = typeof component?.setup === 'function';
    if (isComponent) {
      window.Vue.markRaw(component);
    }
  };
  const keys = Object.keys(modules);
  for (const key of keys) {
    if (key.includes('.vue')) {
      modules[key] = handler.bind(modules[key], key);
    }
  }
})(__webpack_modules__);