The Delightful World of Vue Part 2
Deep and Smart Watchers
  Start your All-Access Pass to unlock this challenge
Buy Access Login

Challenge 2 / 2

In this component, I'm using a watcher to check changes in the pizza object in my component's data. But some of the changes are not triggering a watch!!

<template>
    // Some fancy template here!
</template>

<script>
import { getPizza } from '@/services/get-pizza';
import { executeFancyWatcherLogicHere } from '@/some/crazy/path';

export default {
    name: 'PizzaComponent',
    data() {
        return {
            pizza: null;
        };
    },
    async created() {
        this.pizza = (await getPizza()).data['hydra:member'];
    },
    watch: {
        async pizza() {
            await executeFancyWatcherLogicHere();
        },
    },
};
</script>

I'm thinking that since pizza is a complex object, once it loads, I need to switch the watcher to be a deep watcher. What is the correct way to do it?

Skip challenges and go to theNext Chapter

Turn Challenges Off?

All further challenges will be skipped automatically.
You can re-enable challenges at any time on this page or from your account page.