Vue 3: Implementing an Immediate Watcher

This challenge focuses on understanding and implementing the "immediate" option for watchers in Vue 3. Watchers are powerful tools for reacting to data changes, and the immediate option allows you to trigger the watcher's callback function as soon as the component is mounted, even if the watched data hasn't changed yet. This is crucial for initializing state or performing actions based on initial data.

Problem Description

You need to create a Vue 3 component that demonstrates the use of an immediate watcher. The component will have a reactive data property and a button to increment this property. You will also implement a watcher that logs a message to the console whenever the data property changes, and crucially, also logs a message when the component is initially mounted.

Key Requirements:

• Create a Vue 3 component using the Composition API (script setup syntax is preferred).
• Define a reactive data property, for example, counter, initialized to 0.
• Implement a watcher for the counter property.
• The watcher's callback function should log a specific message to the console, indicating that the counter has changed.
• Configure the watcher to run immediately upon component mounting.
• Include a button within the template that increments the counter property.
• When the component mounts, the watcher's callback should execute once.
• When the button is clicked and the counter changes, the watcher's callback should execute again.

Expected Behavior:

1. Upon component mounting, the console should display the message indicating the counter has changed (due to immediate: true).
2. When the button is clicked, the counter increases, and the console should display the message indicating the counter has changed again.

Edge Cases:

• The initial value of the counter is 0. The watcher should still fire immediately.
• Consider what happens if the watched property is an object or an array. For this challenge, a primitive type (number) is sufficient.

Examples

Example 1: Initial Mount

Input: Component mounts with counter = 0.

Output: (In the browser's developer console)
"Counter changed!"

Example 2: Button Click

Input: Component is mounted (console shows "Counter changed!"). Button is clicked, counter becomes 1.

Output: (In the browser's developer console)
"Counter changed!"

Example 3: Multiple Clicks

Input: Component is mounted (console shows "Counter changed!"). Button is clicked twice, counter becomes 2.

Output: (In the browser's developer console)
"Counter changed!"

Constraints

• Use Vue 3 Composition API (<script setup>).
• Use the watch function from vue.
• The watcher must be configured with immediate: true.
• The watched property is a primitive type (number).
• The component should be renderable in a basic Vue application.

Notes

• The watch function takes the property to watch, a callback function, and an options object.
• The immediate option is a boolean value.
• Think about how you would initialize a piece of data or perform a side effect based on the initial state of your application. The immediate option is perfect for these scenarios.
• Ensure your console output clearly distinguishes between the initial immediate watch and subsequent watches triggered by data changes.