使用Vueify和modal.vue主文件作为模态模板时，Vueify模态无法正常工作

我一直在努力遵循http://adamwathan.me/2016/01/04/composing-reusable-modal-dialogs-with-vuejs/和Vueify一起工作，前几天我设法做到了，然后换了一种不同的方法，决定回来。现在我遇到了一个问题，我的模态只是在页面本身上呈现，而不是作为模态。我使用的是Laravel 5.2和我的index.blade.php扩展文件中的CDN中的最新Vue。

Modal.vue

<template>
    <div class="modal-mask" @click="close" v-show="show" transition="modal">
        <div class="modal-container" @click.stop>
            <slot></slot>
        </div>
    </div>
</template>
<script lang="babel">
    export default {
        props: ['show', 'onClose'],
        methods: {
            close: function () {
                this.onClose();
            }
        },
        ready: function () {
            document.addEventListener("keydown", (e) => {
                if (this.show && e.keyCode == 27) {
                    this.onClose();
                }
            })
        }
    }
</script>

NewSaleModal.vue

<template>
    <modal :show.sync="show" :on-close="close">
        <div class="modal-header">
            <h3>New Post</h3>
        </div>
        <div class="modal-body">
            <label class="form-label">
                Title
                <input v-model="title" class="form-control">
            </label>
            <label class="form-label">
                Body
                <textarea v-model="body" rows="5" class="form-control"></textarea>
            </label>
        </div>
        <div class="modal-footer text-right">
            <button class="modal-default-button" @click="savePost()">
                Save
            </button>
        </div>
    </modal>
</template>
<script lang="babel">
    export default {
        props: ['show'],
            data: function () {
                return {
                    title: '',
                    body: ''
                }
            },
        methods: {
            close: function () {
                this.show = false;
                this.title = '';
                this.body = '';
            }
        }
    }
</script>

App.js

import Vue from 'vue';
import VueResource from 'vue-resource';
import Modal from './v-components/Modal.vue';
import NewSaleModal from './v-components/NewSaleModal.vue';
Vue.use(VueResource);
new Vue({
    el: '#app',
    components: {Modal, NewSaleModal},
    data: {
        showModal: false,
    }
});

来自index.blade.php 的狂欢部分

<div class="module" id="app">
        <new-sale-modal :show.sync="showModal"></new-sale-modal>
    <button id="show-modal" @click="showModal = true">New Post</button>
</div>

它最终只是像这样在页面上呈现NewSaleModelhttps://i.stack.imgur.com/pGhw6.png

我的控制台中绝对没有错误，当我在VueDevTools中检查<NewSaleModal>时，"show"属性设置为false，在<Root>中，showModal变量也设置为false。

这是我的gulpfile和package.json。

gullfile.js

var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
elixir(function(mix) {
    mix.less('main.less')
       .browserify('app.js')
       .version([
            './public/css/main.css',
            './public/js/app.js'
       ])
       .browserSync({proxy: 'site.dev'});
});

软件包.json

{
  "name": "ProjectName",
  "version": "1.0.0",
  "devDependencies": {
    "browserify": "^13.0.0",
    "gulp": "^3.9.1",
    "laravel-elixir-vueify": "^1.0.3",
    "notify-send": "^0.1.2",
    "vue-resource": "^0.7.0",
    "vueify": "^8.3.9"
  },
  "dependencies": {
    "laravel-elixir": "^6.0.0-1",
    "laravel-elixir-browserify": "^0.8.1"
  }
}

任何关于为什么它不能正确地使我的NewSaleModal.vue成为模态的帮助都将是非常好的。