Code reuse with Composition API

Let's now focus on the script section of our root component.

All the logic here is really for one thing - to manage the state of the modal.

In order to make this code resusable in other parts of the app or perhaps even in different project, we should abstract this to a seperate file.

src/App.vue

import Modal from "@/components/Modal";
export default {
  data: () => ({
   modalOpen: true  
  }),
  methods: {
   toggleModalState() { this.modalOpen = !this.modalOpen; }
  },