onclick="closeModal()" で function closeModal() が発火しません

只今モーダルを作成しております。出てきたモーダルの close ボタンを押すとコンソールに「Uncaught ReferenceError: closeModal is not defined at HTMLButtonElement.onclick」と言うエラーが出てきてモーダルを消すことが出来ません。どなたか解消方法をご教授頂ければ幸いです。よろしくお願いいたします。

【環境】
vue-router
該当ファイルの階層「/src/components/test.vue」

【エラー内容】
作成したモーダルに乗っている「close」ボタンを押下すると下記の通りのエラーが出現してしまいます。

Uncaught ReferenceError: closeModal is not defined at HTMLButtonElement.onclick

(index.html)

該当のファイル「/src/components/test.vue」

<template>
    <div>
        <div id="test" style="width: 100%; height: 100px"></div>
        <div id="modal" class="modal">
            <div class="modal-content">
                <div class="modal-body">
                    <h1>Modal</h1>
                    <button onclick="closeModal()">close</button>
                </div>
            </div>
        </div>
    </div>    
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
...(略)...

function openModal(){
    var modal = document.getElementById('modal');
    modal.style.display = 'block';
}

function closeModal(){
    var modal = document.getElementById('modal');
    modal.style.display = 'none';
}
</script>

どなたかご教授頂けると幸いです。よろしくお願いいたします。