When is the function being calculated called?

<divid="example" v-bind:style="{'border':(isValid?':'1px solid red')}">
  <p>Name {{name}}</p>
  <p>
    <input type="text" v-on:input="updateName($event)">
  </p>
  <pv-show="!isValid">
    Please enter a name
  </p>
  <pv-show="isValid">
    <button v-on:click="sendData">Send</button>
  </p>
</div>

 varvm = new Vue({
  el: '#example',
  data: {
    name: '' ,
  },
  computed: {
    isValid: function() {
      return this.name.length>0;
    }
  },
  methods: {
    updateName:function(event){
      this.name=event.target.value;
    },
    sendData: function() {
      alert(this.name);
    }
  }
});
window.vm=vm;

updateName:function(event){
    this.name=event.target.value;
}