Vue 3 Composition API data() Function

With the Composition API, you no longer use `data().` Instead, you declare a reactive state using the `ref` and `reactive` functions.

1. Using `ref`: For primitive values (like strings, numbers, etc.), use `ref`:

import { ref } from 'vue';
   export default {
     setup() {
       const message = ref('Hello, Vue!');
       return { message };
     },
   };

You access the value with `message.value`.

2. Using `reactive`: For objects or arrays, use `reactive`:

import { reactive } from 'vue';
   export default {
     setup() {
       const state = reactive({
         message: 'Hello, Vue!',
         count: 0,
       });
       return { state };
     },
   };

You can access the properties directly, like `state.message`.

This approach gives you more flexibility and better organization for complex components.