How to vue watch a specific property in an array of objects

object vue.js watch

You could use a deep watcher, but a more elegant solution would be to create computed property of the data you want to watch, and watch that instead:

new Vue({  el: '#app',  data: () => ({    forms: [{        day: '12',        month: '9',        year: '2035',        colors: 'lightblue',        selected: true      },      {        day: '28',        month: '01',        year: '2017',        colors: 'lightgreen',        selected: true      }    ],  }),  computed: {    selected() {      return this.forms.map(form => form.selected)    }  },  watch: {    selected(newValue) {      console.log("change made to selection")    }  }})

<html><head>  <script src="https://unpkg.com/vue/dist/vue.js"></script></head><body>  <div id="app">    <ul>      <li v-for="(form, i) in forms" :key="i">        <input type="checkbox" v-model="form.selected"> {{form.colors}}      </li>    </ul>  </div></body></html>

Expand snippet