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?

Select your answer
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.