[Vuejs]-Why do all methods inside template in vue object call automatically when click on button?

2👍

✅

When you update the counter property the DOM will be re rendered and call every property in your script like data, computed properties and methods, if you want to only call that methods in the page load you could use call them inside the mounted hook :

new Vue({
  el: '#app',
  data: () => ({
    counter: 0
  }),
  methods: {
    increase: function() {
      this.counter++
    },
    result: function() {
      console.log('Hi I m result');
    },
    result2: function() {
      console.log('Hi I m result 2');
    }
  },
  mounted() {
    this.result();
    this.result2()
  }
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
<div id="app">
  <button v-on:click="increase" class="btn">Click Me</button>
  <p>{{ counter }}</p>

</div>

👤Boussadjra Brahim