Vue

HTML

<div id="app">
  <button @click="toggle_c1">toggle_c1</button>
  <button @click="toggle_c2">toggle_c2</button>
  <button @click="touch_d1">touch_d1</button>
  <button @click="modify_d2">modify_d2</button>
  <button @click="modify_d3">modify_d3</button>
  <div>data: {{d1}} {{d2}} {{d3}}</div>
  <div v-if="show_c1">c1: {{c1}}</div>
  <div v-if="show_c2">с2: {{c2}}</div>
  
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
  	d1: 1,
    d2: 2,
    d3: 3,
    show_c1: false,
    show_c2: false,
  },
  computed: {
  	c1() {
    console.log('c1')
    return this.d1 + this.d2
    },
  	c2() {
    console.log('c2')
    return this.c1 + this.d3
    },
  },
  methods: {
  	toggle_c1(){
    	console.log('toggle_c1')
    	this.show_c1 = !this.show_c1
    },
  	toggle_c2(){
    	console.log('toggle_c2')
	    this.show_c2 = !this.show_c2
    },
    touch_d1() {
    	console.log('touch_d1')
    	this.d1 = this.d1 + 0
    },
    modify_d2() {
    	console.log('modify_d2')
    	this.d2 = this.d2++
    },
    modify_d3() {
    	console.log('modify_d3')
    	this.d3 = this.d3++
    }
  }
})