Extracting methods and data out to component - vue.js

Question

very new to VueJS. Appreciate any help you can give me!
I'm wanting to extract some code that I've put within app.js out to my component. It appears that the vuejs syntax changes depending on what you're including? Sometimes template is within a property, and other times it has its own tag. Not quite sure what to do here.
VueJS + Laravel 5.5
app.js:
require('./bootstrap');
require('sweetalert');
window.Vue = require('vue');
import Modal from './components/Modal';
Vue.component('Modal', require('./components/Modal.vue'));
const app = new Vue({
el: '#app',
data: {
showModal: false
},
methods: {
openModal() {
this.showModal = true;
},
closeModal() {
this.showModal = false;
},
submitAndClose() {
//
}
}
});
components/Modal.vue
<template>
<transition name="modal">
<div class="modal modal-mask" style="display: block">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<slot name="header"></slot>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<slot name="footer"></slot>
</div>
</div>
</div>
</div>
</transition>
</template>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
</style>
Is there a way to extract the methods and data out of app.js and contain it all within Modal.vue. Quite a basic question I'm sure but Vue seems to be very confusing with its syntax..
Thanks!

Answer 1

You can register a component by using Vue.component(tagName, options). The 2nd parameter options is an object with different properties like name, template etc
You could also use single-file components with the extension .vue in combination with a build tool like Webpack. The template will be placed with a <template> tag, styles within a <style> tag and the options object within a <script> tag. You can read more about single-file components here.