<template>: Esta sección contiene la estructura HTML de la página. Aquí defines la cabecera con una imagen de un logo de Vue y un botón llamado "Pulsar". También incluyes una lista (<ul>) que muestra elementos representados por el componente Listitem.

<script setup>: En esta sección, importas el componente Listitem y otras dependencias necesarias. También defines un array (arr) que contiene objetos con mensajes y un estado activeId que rastrea el índice del elemento activo en la lista. La función changeActiveItem se encarga de cambiar el elemento activo cuando se hace clic en el botón "Pulsar".

Estilos CSS: En la sección de estilos CSS con el atributo scoped, aplicas estilos al encabezado (header) y defines un estilo especial para resaltar el elemento activo de la lista.

<template>: Esta sección contiene la estructura HTML para representar un elemento de la lista. Se utiliza un elemento <li> que puede resaltar su fondo en amarillo si isActive es verdadero y muestra el mensaje msg.

<style scoped>: En la sección de estilos CSS con el atributo scoped, defines un estilo especial llamado .active que cambia el fondo del elemento a amarillo cuando isActive es verdadero. Puedes personalizar este estilo según tus preferencias.

<script setup>: En esta sección, importas defineProps para definir las propiedades que el componente espera recibir. En este caso, msg es una cadena de texto que representa el mensaje que se mostrará, y isActive es un valor booleano que indica si el elemento debe ser resaltado como activo.