Basic Reactive Counter Component

Create a simple counter component that reacts to button clicks, demonstrating Vue's reactivity system.
<div id='counter-app'>
  <p>{{ counter }}</p>
  <button v-on:click='incrementCounter'>Increment</button>
HTML markup for the Vue app. It includes a paragraph element that will display the current counter value and a button to increment the counter.
<script src=''></script>
  new Vue({
    el: '#counter-app',
    data: {
      counter: 0
    methods: {
      incrementCounter: function() {
        this.counter += 1;
JavaScript code using Vue.js. It includes the data property for reactive state (counter) and a method (incrementCounter) to increment the counter. Vue's reactivity system ensures the DOM updates when the counter changes.
  #counter-app { text-align: center; }
  #counter-app p { font-size: 24px; }
  #counter-app button { margin-top: 10px; }
CSS styles for the counter app. It centers the text, sets the font size for the counter display, and adds margin above the button.