// MyComponent.vue
<template>
  <div>
    <h1>{{ message }}</h1>
    <p>Count: {{ count }}</p>
    <p>Doubled Count: {{ doubledCount }}</p>
    <button @click="increment">Increment Count</button>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';

export default {
  setup() {
    // Reactive state using `ref`
    const count = ref(0);
    const message = ref('Hello Vue 3');

    // A computed property that doubles the count
    const doubledCount = computed(() => count.value * 2);

    // A function to modify the state
    const increment = () => {
      count.value++;
    };

    // Lifecycle hook (e.g., onMounted, onUpdated, onUnmounted)
    onMounted(() => {
      console.log('Component is mounted!');
    });

    // Expose properties and methods to the template
    return {
      count,
      message,
      doubledCount,
      increment,
    };
  },
};
</script>

<style scoped>
/* Your component-specific styles here */
div {
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 10px;
}
button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  opacity: 0.9;
}
</style>