using the watch method to monitor route updates in vue

1watch: {
2  // Whenever the movie prop changes, fetch new data
3  movie {
4    handler: 'fetchData'
5  },
6  // Whenever the actor changes, we'll call the same method
7  actor: {
8    handler: 'fetchData',
9  }
10},
11
12methods: {
13  // Fetch data about the movie
14  fetchData() {
15    fetch(`/${this.movie}/${this.actor}`).then((data) => {
16      this.movieData = data;
17    });
18  }
19}

1watch: {
2  // Whenever the movie prop changes, fetch new data
3  movie: {
4    // Will fire as soon as the component is created
5    immediate: true,
6    handler(movie) {
7      // Fetch data about the movie
8      fetch(`/${movie}`).then((data) => {
9        this.movieData = data;
10      });
11    }
12  }
13}

1watch: {
2  movie(movie) {
3    // Fetch data about the movie
4    fetch(`/${movie}`).then((data) => {
5      this.movieData = data;
6    });
7  }
8}

1export default {
2  name: 'MovieData',
3  props: {
4    movie: {
5      type: String,
6      required: true,
7    }
8  },
9  data() {
10    return {
11      movieData: {},
12    }
13  },
14
15  watch: {
16    // Whenever the movie prop changes, fetch new data
17    movie(movie) {
18      // Fetch data about the movie
19      fetch(`/${movie}`).then((data) => {
20        this.movieData = data;
21      });
22    }
23  }
24}

1watch: {
2  movie: {
3    handler(movie) {
4      // Fetch data about the movie
5      fetch(`/${movie}`).then((data) => {
6        this.movieData = data;
7      });
8    }
9  }
10}

1export default {
2  name: 'ColourChange',
3  props: {
4    colours: {
5      type: Array,
6      required: true,
7    },
8  },
9  watch: {
10    colours: {
11      // This will let Vue know to look inside the array
12      deep: true,
13
14      // We have to move our method to a handler field
15      handler()
16        console.log('The list of colours has changed!');
17      }
18    }
19  }
20}