Challenge: Creating a Reusable Universal List Component

Task

Create a universal and reusable list component by following the steps given below:

1. Create props for the list name and items within it, making them required, meaning that the parent component must pass that prop to the child component. Vue should issue a warning in the console if the parent component fails to pass the required prop.

2. Implement scoped slots for custom item rendering.

3. Emit a custom event removeAllItems inside the removeAllItems() method (because otherwise, Vue will complain if you try to modify the items array directly from the child component).

4. Register the custom event in the emits property.

Expected output

The output of the task should look like the following: