Vue - Component code structure

Question

|- src/
  |- router/ 
  |- scss/
  |- App.vue 
  |- main.js
      Vue.component('modal', {
        template: '#modal-template'
      })
  |- components/
    |- MainPanel.vue (show only trigger button)
       <template>
          <button class="btn btn-primary btn-block" id="show-modal" @click="showModal = true">Buy</button>
          <modal v-if="showModal" @close="showModal = false">
            <h3 slot="header">Header of modal</h3>
          </modal> 
       </template>
 
        <script>
        import Modal from './Modal.vue';
 
        export default {
            components: {
              Modal
          },
 
          data () {
            return {
              showModal: false
            }
          }
        }
        </script>
    |- Modal.vue (the modal component)
        <template>
          <div id="modal-template">
            <transition name="modal">
              <div class="modal-mask">
                <div class="modal-wrapper">
                  <div class="modal-container">
 
                    <div class="modal-header">
                      <slot name="header">
                        default header
                      </slot>
                    </div>
 
                    <div class="modal-body">
                      <slot name="body">
                        default body
                      </slot>
                    </div>
 
                    <div class="modal-footer">
                      <slot name="footer">
                        default footer
                        <button class="modal-default-button" @click="$emit('close')">
                          OK
                        </button>
                      </slot>
                    </div>
                  </div>
                </div>
              </div>
            </transition>
             
          </div>
        </template>
 
    <script>
    export default {
 
      data () {
        return {
        }
      }
    }
    </script>
       
|- dist/
  |- index.html
  |- static/
    |- css/
    |- fonts/
    |- images/
    |- js/
 
|- static/ (for gulp)
      |- css/
      |- fonts/
      |- images/
|- gulpfile.js
|- node_modules/
|- package.json