Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Hello Vue</title>
    <meta charset="utf-8">
    <!-- https://unpkg.com/vue@2.6.11/dist/vue.min.js -->
    <!-- подключение фреймворка vue.js -->
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <style type="text/css">
    .active {
      color: red
    }
    .some {
      font-size: 24px;
    }
    </style>
</head>
<body>
<!-- элемент div c идентификатором app -->
<!-- v-for -->
<div id="app">

  <myblock :title="blockTite" :message="blockText"></myblock>
  <myblock :title="blockTite" :message="blockText"></myblock>
</div>
</body>

<template id="myblock_tid">
  <div>
    <h2>{{title}}</h2>
    <div>{{message}}</div>
  </div>
</template>

<script type="text/javascript">
  //
  Vue.component('myblock', {
    props: ['title', 'message'],
    template: '#myblock_tid',
    data: function () {
      return {
        count: 0
      }
    },
    methods: {
       test: function() {
          this.title = 'NEW TEXT';
       }
    }
  });

    // создаем объект Vue (экземпляр Vue)
    new Vue({
  el: "#app",
  data: {
    blockTite: "MY TITLE",
    blockText: "MY TEXT",
    showFlag: false,
    result: '',
    price: 10.0777,
    bonus2: 2,
    message: 'some message',
    products: [
      {name: "Product1", price: 100},
      {name: "Product2", price: 200}
    ]
  },
  methods : {
      incCounter: function(todo){
            //alert('incCounter');
            this.$refs.counter3.inc();
            alert(this.$refs.counter3.count);
      },
      doSomething: function(param){
        console.log('doSomething' + param);
      },
      processCounterResult: function(param){
        console.log('processCounterResult=' + param);
      }
  },
  mounted: function() {
      console.info('mounted fired');
      // обращаемся к узлу DOM
  }
})
</script>
</html>