Vue Counter Component Example - Simple and Interactive

Sure! Here's an example of a Vue component that displays a simple counter:\n\nhtml\n<template>\n <div>\n <button @click="increment">Increment</button>\n <p>Counter: {{ counter }}</p>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n counter: 0\n }\n },\n methods: {\n increment() {\n this.counter++\n }\n }\n}\n</script>\n\n\nIn this example, we have a Vue component with a template that contains a button and a paragraph element. The button has an @click event listener that calls the increment method when clicked. The paragraph element displays the current value of the counter data property using double curly braces {{ }}. \n\nThe data property returns an object with the initial value of the counter set to 0. The increment method simply increments the counter value by 1 whenever it is called.\n\nTo use this component, you can include it in your main Vue instance or in another component:\n\nhtml\n<template>\n <div>\n <h1>My App</h1>\n <CounterComponent />\n </div>\n</template>\n\n<script>\nimport CounterComponent from './CounterComponent.vue'\n\nexport default {\n components: {\n CounterComponent\n }\n}\n</script>\n\n\nIn this example, we import the CounterComponent and register it as a component in the components property of the main Vue instance. Then, we can use the CounterComponent by including it in the template of the main Vue instance.\n\nWhen the "Increment" button is clicked, the counter value will be incremented and displayed on the page.