Reactive Data Source Watcher in Vue.js with TypeScript

This challenge focuses on building a reusable component in Vue.js that allows you to "watch" a data source (an array) and trigger a callback function whenever an item in the array changes. This is a common pattern for implementing features like real-time updates, data synchronization, or triggering side effects based on array modifications. The goal is to create a flexible and type-safe solution using TypeScript.

Problem Description

You need to implement a Vue component called DataSourceWatcher. This component will accept a data source (an array of any type) and a callback function as props. The component should reactively watch the data source array for changes. Whenever an item within the array is added, removed, or modified, the callback function should be executed, passing the modified array as an argument.

Key Requirements:

• Data Source Prop: The component must accept a dataSource prop, which is an array of any type (use generics for type safety).
• Callback Prop: The component must accept a callback prop, which is a function that takes the modified array as an argument.
• Reactive Watching: The component must use Vue's reactivity system to watch for changes in the dataSource array. This includes additions, removals, and modifications of existing items.
• Callback Execution: The callback function must be executed whenever a change is detected in the dataSource array.
• Type Safety: The component should be written in TypeScript to ensure type safety for the data source and callback function.
• Component Structure: The component should be a simple, functional component (using setup and defineProps). No template is required; the component's sole purpose is to trigger the callback.

Expected Behavior:

• When the DataSourceWatcher component is mounted, it should start watching the dataSource array.
• Any modification to the dataSource array (pushing, popping, splicing, setting elements) should trigger the callback function.
• The callback function should receive the entire modified array as its argument.
• If the dataSource prop is initially undefined or null, the component should not throw an error and should not attempt to watch anything.

Edge Cases to Consider:

• Initial dataSource is null or undefined: The component should gracefully handle this case without errors.
• dataSource is an empty array: The component should still watch for changes (additions/removals) even if the array is initially empty.
• callback is null or undefined: The component should gracefully handle this case without errors.
• Deeply nested objects within the array: Changes to properties within objects inside the array should trigger the callback.

Examples

Example 1:

Input: dataSource = [{id: 1, name: "Alice"}, {id: 2, name: "Bob"}], callback = (arr) => console.log("Array changed:", arr)
Output: (Console log) "Array changed: [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}]" (when any element in the array is modified)
Explanation: The DataSourceWatcher component detects a change in the array and executes the callback with the updated array.

Example 2:

Input: dataSource = [], callback = (arr) => console.log("Array changed:", arr)
Output: (Console log) "Array changed: [{id: 3, name: 'Charlie'}]" (when an element is pushed)
Explanation: The DataSourceWatcher component correctly handles an empty initial array and triggers the callback when an element is added.

Example 3: (Edge Case)

Input: dataSource = null, callback = (arr) => console.log("Array changed:", arr)
Output: No error, no console log.
Explanation: The DataSourceWatcher component gracefully handles a null dataSource without throwing an error.

Constraints

• The component must be written in TypeScript.
• The component should be a functional component using setup and defineProps.
• The component should not render any visual elements (no template).
• The dataSource prop can be an array of any type.
• The callback prop must be a function that accepts a single argument (the modified array).
• The solution should be concise and readable.

Notes

• Consider using Vue's watch function to observe changes in the dataSource array.
• Pay close attention to type safety when working with generics.
• Think about how to handle edge cases gracefully.
• The focus is on the reactive watching and callback execution logic, not on any UI rendering. The component's sole responsibility is to trigger the callback when the data source changes.