<!-- App.vue -->
<template>
  <div id="app">
    <input type="text" v-model="message">
    <p>Message is: {{ message }}</p>
    <button @click="reverseMessage">Reverse Message</button>
    <hr />
    <div v-if="show">Now you see me</div>
    <div v-else>Now you don't</div>
    <button @click="show = !show">Toggle Show</button>
    <hr />
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script setup>
  import { ref, reactive } from 'vue';

  const message = ref('Hello Vue!');
  const show = ref(true);
 
  const todos = reactive([
    { id: 1, text: 'Learn JavaScript' },
    { id: 2, text: 'Learn Vue' },
    { id: 3, text: 'Build something awesome' }
  ]);

  const reverseMessage = () => {
    message.value = message.value.split('').reverse().join('');
  };
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>