Hydration behavior in Vue - Mini Project: Build & Apply

Understanding Hydration Behavior in Vue 3

📖 Scenario: You are building a simple Vue 3 app that renders a list of fruits on the server and then hydrates it on the client. This means the HTML is generated on the server first, and then Vue takes over on the client to make it interactive without re-rendering everything.

🎯 Goal: Create a Vue 3 component that displays a list of fruits rendered on the server, then add a button to add a new fruit on the client side. This will demonstrate hydration behavior where the server-rendered HTML is reused and enhanced on the client.

📋 What You'll Learn

Create a Vue 3 component with a reactive list of fruits

Initialize the fruits list with exactly these items: 'Apple', 'Banana', 'Cherry'

Add a reactive variable called 'newFruit' initialized as an empty string

Add an input field bound to 'newFruit' and a button to add it to the fruits list

Use Vue 3 Composition API with