Vue 2 - Render after watch

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <p>
    {{ value1 }} : {{ value2 }}
  </p>
  <button @click="onClick">Click</button>
</div>

JavaScript

const App = {
  data() {
    return {
      value1: 1,
      value2: 2
    }
  },
  methods: {
    onClick () {
      this.value1++
    }
  },
  watch: {
    value1 () {
      debugger
      this.value2 = this.value1 * 2
    }
  },
  updated () {
    console.log(`${this.value1} : ${this.value2}`)
  }  
}

new Vue(App).$mount('#app')