Vue Mount Wrapper Component

This challenge asks you to create a reusable Vue component, a "Mount Wrapper," that simplifies the process of mounting a Vue component within a specific DOM element. This is particularly useful when you need to dynamically mount and unmount components, or when you want to encapsulate the mounting logic within a dedicated component for better organization and reusability.

Problem Description

You need to build a Vue component called MountWrapper that accepts a component as a prop and a target element selector as a prop. The MountWrapper component should:

1. Accept component and targetSelector props: The component prop will be a Vue component instance (or constructor). The targetSelector prop will be a CSS selector string representing the DOM element where the component should be mounted.
2. Mount the component on creation: When the MountWrapper component is created (mounted), it should find the element matching the targetSelector and mount the provided component into that element.
3. Unmount the component on destruction: When the MountWrapper component is destroyed (unmounted), it should unmount the component that was previously mounted.
4. Handle invalid target selectors: If the element specified by targetSelector does not exist in the DOM when the MountWrapper is mounted, it should log an error to the console and not attempt to mount the component.
5. Handle invalid component prop: If the component prop is not a valid Vue component, it should log an error to the console and not attempt to mount anything.

Expected Behavior:

• The MountWrapper component should dynamically mount and unmount the provided component based on its lifecycle.
• The component should gracefully handle cases where the target element is not found or the component prop is invalid.
• The component should not interfere with other parts of the application.

Examples

Example 1:

Input:
  - MountWrapper component with prop: component = MyComponent, targetSelector = '#app'
  - MyComponent is a simple Vue component that displays "Hello, World!"

Output:
  - MyComponent is mounted within the element with the ID 'app'.
  - The element with ID 'app' now contains the output of MyComponent ("Hello, World!").

Example 2:

Input:
  - MountWrapper component with prop: component = AnotherComponent, targetSelector = '.container'
  - AnotherComponent is a Vue component.
  - The element with class 'container' is removed from the DOM after the MountWrapper is mounted.

Output:
  - The MountWrapper attempts to mount AnotherComponent into '.container'.
  - Because '.container' no longer exists, an error is logged to the console.
  - AnotherComponent is not mounted.

Example 3:

Input:
  - MountWrapper component with prop: component = null, targetSelector = '#my-element'

Output:
  - An error is logged to the console indicating that the component prop is invalid.
  - No component is mounted.

Constraints

• The targetSelector prop must be a string.
• The component prop must be a valid Vue component (either a constructor or an instance).
• The component should be lightweight and efficient, minimizing unnecessary DOM manipulations.
• Error messages should be clear and informative.
• The component should be compatible with Vue 3.

Notes

• Consider using document.querySelector to find the target element.
• Use vue-demi's mount and unmount functions for mounting and unmounting the component. You'll need to install it: npm install vue-demi
• Think about how to handle potential errors during the mounting and unmounting process.
• Focus on creating a clean, reusable, and well-documented component.
• The MountWrapper component should not render any content itself; it's purely a mounting container.