Vue 3 Ref Reactive State Management

This challenge focuses on understanding and implementing Vue 3's ref API for managing reactive state within a TypeScript-based Vue application. Mastering ref is fundamental for building dynamic and responsive user interfaces in Vue.

Problem Description

Your task is to create a simple Vue component that utilizes the ref API to manage a piece of reactive state. This state will represent a counter that can be incremented and decremented through user interactions. You will need to set up the reactive state, bind it to the template, and implement functions to modify its value.

Key Requirements:

1. Declare Reactive State: Use ref from Vue to declare a reactive variable (e.g., count).
2. Initialize State: Initialize the count ref with an initial value (e.g., 0).
3. Template Binding: Display the current value of the count ref in the component's template.
4. State Modification: Implement two buttons: one to increment the count and another to decrement it. These buttons should trigger functions that modify the .value property of the count ref.
5. TypeScript Integration: Ensure all code is written in TypeScript, leveraging Vue's script setup syntax.

Expected Behavior:

• The component should render with the initial count value displayed.
• Clicking the "Increment" button should increase the displayed count by 1.
• Clicking the "Decrement" button should decrease the displayed count by 1.

Edge Cases to Consider:

• While not strictly required for this basic challenge, consider how negative values might be handled if more complex logic were involved.

Examples

Example 1: Basic Counter Component

Component Structure (Conceptual):

<script setup lang="ts">
import { ref } from 'vue';

// Declare and initialize reactive state
const count = ref(0);

// Function to increment the counter
const increment = () => {
  count.value++;
};

// Function to decrement the counter
const decrement = () => {
  count.value--;
};
</script>

<template>
  <div>
    <h2>Counter</h2>
    <p>Current Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

Explanation:

The ref(0) creates a reactive reference initialized to 0. When count.value is accessed or modified in the template or script, Vue automatically tracks these changes and updates the UI. The increment and decrement functions directly manipulate the .value property of the count ref.

Constraints

• You must use Vue 3 with its Composition API.
• The solution must be implemented entirely in TypeScript.
• The script setup syntax is preferred for its conciseness.
• No external state management libraries (like Pinia or Vuex) are allowed for this challenge.

Notes

• Remember that when using ref with primitive types (numbers, strings, booleans), you need to access and modify its value using the .value property.
• Vue's template compiler automatically unwraps .value for you when you use a ref directly in the template.
• This challenge is designed to test your fundamental understanding of Vue's reactivity system with ref.