TheuseModal().create() method was causing Vue warnings when custom components were passed becausetoRef(obj) made the entire object reactive, including component references:

const{ create}=useModal();create({component:FeedbackModal}).show();

This would produce the warning:

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

Root Cause

The issue was in theuseModal/index.ts file wheretoRef(obj) was used to make the entire parameter object reactive. This approach inadvertently made any component references within the object reactive as well, triggering Vue's performance warning.

Solution

• ReplacedtoRef() withshallowRef(): For non-ref objects, we now useshallowRef() which only tracks mutations to.value without making the contents deeply reactive
• Simplified approach:shallowRef() alone is sufficient to prevent the reactive component warning - no pre-emptivemarkRaw() calls needed
• Preserved existing behavior: Ref objects passed as parameters continue to work exactly as before

Changes

1. Updated reactivity logic inuseModal/index.ts to useshallowRef() instead oftoRef()
2. Added comprehensive tests to prevent regression and verify the fix
3. Added playground example demonstrating the fix works in practice

Technical Details

The key insight is thatshallowRef() creates a ref where only the.value mutation is tracked, but the contents are not deeply reactive. This means components placed inside the shallowRef don't trigger Vue's reactivity warning. The existingmarkRaw() calls in the watch handler remain in place where needed, but pre-emptive marking during initialization is unnecessary.

The fix is backward compatible and maintains all existing functionality while eliminating the Vue warning with a simpler, more elegant solution.

Fixes#2848.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn moreCopilot coding agent tips in the docs.