So, how can we add/remove classes from the body if it's out of Vue's dominion? We'll have to do it the old-fashioned way with the browser's Web API. We need to run the following statements when the modal is opened or closed:
// Modal opens document.body.classList.add('modal-open'); // Modal closes document.body.classList.remove('modal-closed');
As discussed, Vue adds reactive getters and setters to each data property so that when data changes it knows to update the DOM appropriately. Vue also allows you to write custom logic that hooks into reactive data changes via a feature called watchers.
To add a watcher, first add the watch property to your Vue instance. Assign an object to this where each property has the name of a declared ...
