Vue.js IntelliSense Component

Develop a Vue.js component that provides basic intelligent code completion (intellisense) for a predefined set of keywords and properties within a text input area. This component will simulate a simplified version of what developers experience in modern IDEs, offering suggestions as the user types.

Problem Description

The goal is to create a reusable Vue.js component that acts as a smart text editor. When a user types into this editor, the component should analyze the input and suggest relevant completions from a predefined list of keywords and properties. The suggestions should appear in a dropdown list below the input field, and the user should be able to select a suggestion to insert it into the input.

Key Requirements:

1. Input Field: A standard HTML <textarea> or a custom input element managed by Vue.
2. Suggestion List: A dynamically appearing and disappearing dropdown list below the input field.
3. Keyword Matching: The component should suggest items from a predefined list that start with the currently typed text.
4. Selection Mechanism: Users should be able to select a suggestion using mouse clicks or keyboard navigation (e.g., arrow keys to navigate, Enter to select).
5. Insertion: Upon selection, the chosen suggestion should replace the currently typed partial word in the input field.
6. Styling: Basic styling should be applied to make the input and suggestion list visually distinct and user-friendly.
7. Reusability: The component should be designed for easy integration into other Vue applications.

Expected Behavior:

• As the user types in the input field, if the typed text matches the beginning of any predefined keywords/properties, a dropdown list of matching suggestions will appear.
• If the user types more characters, the suggestion list should update to show only relevant matches.
• If no matches are found, the dropdown should disappear.
• Clicking on a suggestion in the dropdown will insert that suggestion into the input field, replacing the current partial word, and the dropdown will disappear.
• The component should handle cases where the user types at the beginning, middle, or end of a "word" for potential completion.

Edge Cases to Consider:

• Empty input field: No suggestions should appear.
• Input field with only spaces: No suggestions should appear.
• Case sensitivity: Decide whether matching should be case-sensitive or case-insensitive (case-insensitive is generally preferred for intellisense).
• Rapid typing: Ensure the suggestion list updates smoothly without performance degradation.
• User clears input: The suggestion list should disappear.

Examples

Example 1: Basic Typing and Suggestion

Input (User typing):
<textarea>v-bind:</textarea>
Predefined Keywords: ['v-bind:', 'v-model', 'v-on:', 'v-if', 'v-for', 'data', 'methods', 'computed']

Output (Component rendering):
A textarea with "v-bind:" inside.
A dropdown list appears below, showing:
- v-bind:
- v-model
- v-on:

Explanation: The user has typed "v-bind:", which matches the beginning of "v-bind:", "v-model", and "v-on:". The component displays these as suggestions.

Example 2: Selecting a Suggestion

Continuing from Example 1, if the user clicks on "v-on:" from the suggestion list.

Input (User action): Clicks on "v-on:" in the suggestion list.
Predefined Keywords: ['v-bind:', 'v-model', 'v-on:', 'v-if', 'v-for', 'data', 'methods', 'computed']

Output (Component rendering):
<textarea>v-on:</textarea>
The dropdown list disappears.

Explanation: The selected suggestion "v-on:" replaces the partial word (which was "v-bind:" at the point of click, but the completion logic should identify the "word boundary"). The dropdown is hidden.

Example 3: No Match Found

Input (User typing):
<textarea>some_random_text</textarea>
Predefined Keywords: ['v-bind:', 'v-model', 'v-on:', 'v-if', 'v-for', 'data', 'methods', 'computed']

Output (Component rendering):
A textarea with "some_random_text" inside.
No dropdown list appears.

Explanation: The text "some_random_text" does not match the beginning of any predefined keywords.

Constraints

• The predefined list of keywords and properties will not exceed 100 items.
• The text entered into the input field will not exceed 1000 characters.
• The component should aim to render suggestions with a latency of less than 50ms on typical modern hardware.
• The component must be built using Vue 3 and TypeScript.

Notes

• Consider how to identify the "word" or "token" that the user is currently typing for completion. You might want to split the input text by spaces or other delimiters.
• Keyboard navigation (up/down arrows for selection, Enter to confirm) is a desirable feature for a better user experience.
• The predefined list of keywords can be passed as a prop to the component, making it more flexible.
• You'll need to manage the state of the input value, the visibility of the suggestion list, and the currently highlighted suggestion (if implementing keyboard navigation).