Vue.js Checkbox Binding with TypeScript

This challenge focuses on implementing bidirectional data binding for checkboxes in Vue.js using TypeScript. Mastering this is fundamental for building interactive forms and managing user selections effectively within Vue applications.

Problem Description

Your task is to create a Vue.js component that displays a list of items, each represented by a checkbox. When a user checks or unchecks a checkbox, the corresponding item should be added to or removed from a list of selected items, which is also displayed in the component. This selection state needs to be managed using Vue's reactivity system and bound to the checkboxes.

Key Requirements:

• Display a list of available items.
• Each item should have an associated checkbox.
• Maintain a reactive list of selected items.
• When a checkbox is checked, the item should be added to the selected list.
• When a checkbox is unchecked, the item should be removed from the selected list.
• The selected list should be displayed to the user.
• The component should be written in TypeScript.

Expected Behavior:

Upon rendering, the component should show all available items with their checkboxes in an unchecked state. As the user interacts with the checkboxes, the displayed list of selected items should update in real-time.

Edge Cases:

• Empty initial selection: The component should handle cases where no items are selected initially.
• Deselecting all: The component should correctly update the selected list when all checkboxes are deselected.

Examples

Example 1:

Input:

Assume the component receives an items prop: ['Apple', 'Banana', 'Cherry']

Component State (Initial):

• items: ['Apple', 'Banana', 'Cherry']
• selectedItems: [] (empty array)

UI Rendering:

• Apple
• Banana
• Cherry
• Selected:

User Action: Checks the 'Apple' checkbox.

Component State (After Action):

• items: ['Apple', 'Banana', 'Cherry']
• selectedItems: ['Apple']

UI Rendering:

• Apple
• Banana
• Cherry
• Selected: Apple

Example 2:

Input:

items prop: ['Red', 'Green', 'Blue']

Component State (Initial):

• items: ['Red', 'Green', 'Blue']
• selectedItems: []

UI Rendering:

• Red
• Green
• Blue
• Selected:

User Actions:

1. Checks 'Green'.
2. Checks 'Blue'.
3. Unchecks 'Green'.

Component State (After Actions):

• items: ['Red', 'Green', 'Blue']
• selectedItems: ['Blue']

UI Rendering:

• Red
• Green
• Blue
• Selected: Blue

Constraints

• The items prop will be an array of strings.
• The selectedItems array should also contain strings.
• The solution must utilize Vue 3's Composition API.
• All code must be written in TypeScript.

Notes

• Consider using v-model to directly bind the checkbox state to your reactive selectedItems array.
• You'll need to define the data structures and types appropriately in TypeScript.
• Think about how to efficiently check if an item is already in the selectedItems array when rendering the initial state of the checkboxes if there's an initial selection passed in as a prop.