Dynamic Field Arrays in Vue with TypeScript

This challenge focuses on implementing a dynamic field array component in Vue.js using TypeScript. Field arrays are a common pattern in forms where you need to manage a list of related fields (e.g., addresses, phone numbers, items in a shopping cart) and allow users to add, remove, and edit them. This is a crucial skill for building complex forms and data entry interfaces.

Problem Description

You are tasked with creating a Vue component called FieldArray that manages an array of field objects. Each field object will have a name and a value property. The FieldArray component should:

Initialize: Accept an initial array of field objects as a prop.
Add Field: Provide a method to add a new field object to the array. The new field should have a default name (e.g., "New Field") and an empty value.
Remove Field: Provide a method to remove a field object from the array, given its index.
Update Field: Allow the value of a field to be updated.
Emit Event: Emit an event named update:modelValue whenever the array of field objects changes. The event should carry the updated array.
Render Fields: Render each field object in the array as a simple input element, displaying the name and allowing the user to edit the value.

Key Requirements:

The component must be written in TypeScript.
The component should be reusable and maintainable.
The component should handle adding, removing, and updating fields correctly.
The component should emit the update:modelValue event with the updated array.

Expected Behavior:

When the component is initialized, it should render the initial array of fields.
Adding a field should add a new input element to the rendered list.
Removing a field should remove the corresponding input element from the rendered list.
Updating a field's value should update the value property of the corresponding field object in the array.
Any changes to the array (add, remove, update) should trigger the update:modelValue event.

Edge Cases to Consider:

Empty initial array.
Removing the last field in the array.
Invalid index provided to the remove field method. (Handle gracefully, perhaps by logging an error or doing nothing).
Large arrays of fields (consider performance implications, though this is less critical for this exercise).

Examples

Example 1:

Input: initialFields = [{ name: "Field 1", value: "Value 1" }, { name: "Field 2", value: "Value 2" }]
Output: Renders two input fields, one for "Field 1" with value "Value 1" and one for "Field 2" with value "Value 2".  A button to add a new field is also present.
Explanation: The component initializes with the provided fields and renders them.

Example 2:

Input: initialFields = []
Output: Renders an empty list and a button to add a new field.
Explanation: The component handles the case where the initial array is empty.

Example 3:

Input: User clicks "Add Field", then updates the value of "Field 1" to "New Value 1", then clicks "Remove Field" on "Field 2".
Output: The array emitted via `update:modelValue` will be `[{ name: "Field 1", value: "New Value 1" }]`.
Explanation: Demonstrates adding, updating, and removing fields, and the corresponding event emission.

Constraints

The component should be self-contained and not rely on external libraries beyond Vue and TypeScript.
The name property of each field should be a string.
The value property of each field should be a string.
The update:modelValue event should be emitted synchronously after each change to the array.
The component should be reasonably performant for arrays up to 50 elements.

Notes

Consider using Vue's reactivity system (ref or reactive) to manage the array of field objects.
Think about how to handle the index of each field when adding and removing them.
You can use a simple input element for rendering each field.
Focus on the core functionality of managing the array and emitting the update:modelValue event. Styling and advanced features are not required.
Error handling for invalid index removal is important for robustness.