vue-js-modal × composition apiでのモーダル表示

Question

###実現したいこと

vue/composition api初学者です。

開くボタンを押すとmodalが発火するようにしたいです。

参考にしたサイト
https://tech.fusic.co.jp/posts/2020-10-26-vue-modal-sample/

###コード

<template>
  <div>
    <button
    @click="showModal"
    >
    開く
    </button>
    <modal name="addItem">
      <div class="modal-header">
        <div class="modal-area-inner">
          <p>モーダルウィンドウが表示されました。</p>
        </div>
      </div>
    </modal>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'
import Vue from 'vue'
import VModal from 'vue-js-modal'

export default defineComponent({
    setup () {
      Vue.use(VModal);
      const showModal = () => {
        $modal.show('addItem')
      }

      return {
        showModal,
      }
    }
})
</script>

###予想
vueのバージョンがvue-js-modalのバージョンに合っていない。

###エラー文
ReferenceError: $modal is not defined

###バージョン
vue:2.6.12
vue-js-modal:^2.0.0-rc.6