<div id="app">
  <h3>
    <button @click="increment">+</button>
    Adjust the data
    <button @click="decrement">-</button>
  </h3>
  <h2>This is the app data: <span class="num">{{ count }}</span></h2>
  <hr>
  <h4><app-child count="5"></app-child></h4> 
  <p>This is a child counter that is using a static integer as props</p>
  <hr>
  <h4><app-child :count="count"></app-child></h4>
  <p>This is the same child counter and it is using the vue instance data as props</p>
</div>
body {
  color: #006494;
}

#app {
  text-align: center;
  margin: 60px;
  max-width: 370px;
  margin: 0 auto;
  display: table;
}

.num {
  color: #AF007E;
}

h4 {
  margin-bottom: 0;
}

button {
  color: #051923;
  border: 0;
  padding: 5px 15px;
  margin: 0 10px;
  border-radius: 4px;
  outline: 0;
  cursor: pointer;
}

hr {
  border-color: #F2FAFF;
  opacity: 0.5;
}
View Compiled
const app = Vue.createApp({
  data() {
    return {
      count: 0    
    }
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }
})

app.component('app-child', {
  props: { 
    count: {
      type: Number,
      required: true
    }
  },
  template: `<div class="num">{{ count }}</div>`
})

app.mount('#app')
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/vue@next