10-props-wrong-way.html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
  <title>Component</title>
  <style>
    #app {
      margin: 1em;
      font-size: 1.2em;
    }

    .component {
      margin-bottom: 1em;
    }
  </style>
</head>

<body>

  <div id="app">
    <div>count of parent: {{ counts }}</div>
    <br>
    <my-component :count="counts"></my-component>
    <my-component :count="counts"></my-component>
    <my-component :count="counts"></my-component>
    <my-component :count="counts"></my-component>
    <my-component :count="counts"></my-component>
  </div>

  <script>

    Vue.component('my-component', {
      template: '<div class="component"> <span> {{ count }}</span> - <button @click="count++">add</button></div>',
      props: ['count']
    });

    new Vue({
      el: '#app',
      data:{
        counts: 0
      }
    });
  </script>


</body>

</html>