Estilización de componentes en Vue.js

Objetivo: Crear un componente Vue desde cero que utilice estilos scoped y clases CSS dinámicas para cambiar la apariencia de un botón basado en su estado.

Instrucciones

1. Crea un componente Vue llamado BotonDinamico.
2. El componente debe incluir un botón que cambie de estilo cuando se haga clic en él.
3. Implementa una propiedad data llamada isClicked que controle el estado del botón (inicialmente false).
4. Usa la directiva :class para aplicar dinámicamente una clase llamada clicked al botón cuando isClicked sea true.
5. Define los estilos del componente dentro de una sección <style scoped>, asegurándote de que el botón tenga un fondo azul inicialmente y cambie a verde cuando la clase clicked esté activa.
6. Asegúrate de que los estilos sean específicos del componente utilizando el atributo scoped.

Requisitos adicionales

• El botón debe tener un texto que indique su estado actual, por ejemplo, "No pulsado" cuando isClicked es false y "Pulsado" cuando isClicked es true.
• Usa un método en el componente para alternar el valor de isClicked cada vez que se haga clic en el botón.