Issues using vue-js-modal component

Issues using vue-js-modal component

매뉴얼에 기재되어 있는 컴포넌트 사용 방법에 대해 설명했는데,TypeError: show is not a function

In my main JS file (app.js) I added the following and adding to my project using npm

import VModal from 'vue-js-modal'
Vue.use(VModal)

문서상으로는 앱 내 어디에서나 모달 호출이 가능하기 때문에 모달 숨기기/보여주기 위해 페이지별 JS파일을 만들고 다음을 포함했습니다.name="hello-world"vue, app.http 및 페이지 고유의 profile.http 파일이 포함된 페이지에 있습니다.

export default {
    methods: {
        show() {
            this.$modal.show('hello-world');
        },
        hide() {
            this.$modal.hide('hello-world');
        }
    }
}

페이지를 로드할 때 모달 콘텐츠가 표시되지 않지만 링크를 클릭하면<a href="#" @click.prevent="show">Modal</a>show method에 오류가 발생함TypeError: show is not a function

I am using laravel mix and verified that everything is being compiled as expected. Below is a how I am including JS files on the profile page:

<script type='text/javascript' src='/assets/js/manifest.js?ver=5.2.3'></script>
<script type='text/javascript' src='/assets/js/vendor.js?ver=5.2.3'></script>
<script type='text/javascript' src='/assets/js/app.js?ver=1569678574'></script>
<script type='text/javascript' src='/assets/js/profile.js?ver=1569678574'></script>

I am trying to "level up" my Vue and JavaScript experience, previously I just stuck to writing ES5 and my Vue was written without components and bound to a page specific Vue instance, so any help would be greatly appreciated!

EDIT

app.js

window.Vue = require('vue');

require('./global/header.js');

Vue.component('tabs', require('./components/Tabs.vue'));
Vue.component('tab', require('./components/Tab.vue'));

import VModal from 'vue-js-modal'

Vue.use(VModal)


new Vue({
    el: '#app'
});

profile.js

export default {
    methods: {
        show() {
            this.$modal.show('hello-world');
        },
        hide() {
            this.$modal.hide('hello-world');
        }
    }
}

webpack.mix.js that compiles profile.js

mix
  .js("resources/js/pages/home.js", "assets/js/home.js")
  .js("resources/js/pages/teams.js", "assets/js/teams.js")
  .js('resources/js/pages/profile.js', 'assets/js/profile.js')

The error doesn't specify if its the $modal.show() function or your profile.js show() function that is undefined. I suspect that it's your profile.js show() function because it looks like everything is in order with regards to vue-js-modal.

You need to add profile.js as a vue mixin (https://vuejs.org/v2/guide/mixins.html) in order for its functions to be added to the vue instance. So in your app.js add:

import profile from '/assets/js/profile'
Vue.mixin(profile);

ReferenceURL : https://stackoverflow.com/questions/58147409/issues-using-vue-js-modal-component