// Reactive data - these automatically sync with v-model bound components
const statusMessage = ref('Dialog is closed');
const greetingMessage = ref('Enter your name below');
const userName = ref('');

const openDialog = () => {
    console.log('Opening dialog...');
    dialogOpen.value = true;
    statusMessage.value = 'Dialog is open';
};

const closeDialog = () => {
    console.log('Closing dialog...');
    dialogOpen.value = false;
    statusMessage.value = 'Dialog is closed';
    greetingMessage.value = 'Enter your name below'; // Reset greeting
    userName.value = ''; // Clear input
};

const sayHello = () => {
    const name = userName.value || 'Anonymous';
    console.log('User name from v-model:', name);
    greetingMessage.value = `Hello, ${name}! Nice to meet you!`;
};

onMounted(() => {
    console.log('Component mounted!');
    console.log('Reactive variables initialized:');
    console.log('- statusMessage:', statusMessage.value);
    console.log('- greetingMessage:', greetingMessage.value);
    console.log('- userName:', userName.value);
    
    // Watch for changes to demonstrate reactivity
    watch(userName, (newValue) => {
        console.log('userName changed to:', newValue);
    });
});