Full-Stack Vue.js 2 and Laravel 5

Refs
In its initial state, the modal window is hidden with a display: none CSS rule. To
open the modal, the user must click the header image. A click event listener will
then set the root instance data property modelOpen to true, which will, in turn, add a
class to the modal to overwrite the display: none to display: block.
After refactoring, however, modalOpen has been moved into the ModalWindow
component along with the rest of the modal logic, and hence the modal opening
functionality is currently broken. One possible way to fix this is to let the root
instance manage the opened/closed state of the modal by moving the logic back
into the root instance. We could then use a prop to inform the modal when it
needs to open. When the modal is closed (this happens in the scope of the modal
component, where the close button is) it would send an event to the root instance
to update the state.
This approach would work, but it's not in the spirit of making our components
decoupled and reusable; the modal component should manage its own state.
How, then, can we allow the modal to keep its state, but let the root instance (the
parent) change it? An event won't work, as events can only flow up, not down.
ref is a special property that allows you to directly reference a child component's
data. To use it, declare the ref property and assign it a unique value, such as
imagemodal.
resources/views/app.blade.php: ...
Now the root instance has access to this specific ModalWindow component's data via
the $refs object. This means we can change the value of modalOpen inside a root
instance method, just like we could from within ModalWindow.
resources/assets/js/app.js: var app = new Vue({ ... methods: { openModal() {
this.$refs.imagemodal.modalOpen = true; }, } });
Now we can call the openModal method in the header image's click listener, thus