vue-loading-overlay show 오류 발생

main.js

import VueLoading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/css/index.css'

app.use(VueLoading)

LoadingOverlayView.vue

<template>
  <div>
    <button @click="doSearch">조회</button>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      sampleData: ''
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    doSearch() {
      const loader = this.$loading.show()
      // simulate AJAX
      setTimeout(() => {
        loader.hide()
      }, 5000)
    }
  }
}
</script>

오류내용

Cannot read properties of undefined (reading 'show')
TypeError: Cannot read properties of undefined (reading 'show')
    at Proxy.doSearch (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/9_module/LoadingOverlayView.vue?vue&type=script&lang=js:15:36)
    at onClick._cache.<computed>._cache.<computed> (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/9_module/LoadingOverlayView.vue?vue&type=template&id=ce3ceda8:9:83)
    at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:351:19)
    at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:358:17)
    at HTMLButtonElement.invoker (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:883:82)

무엇 때문에 발생하는 오류일까요?

import 'vue-loading-overlay/dist/css/index.css'
app.component('vue-loading', VueLoading)
// app.use(VueLoading)  --> component로 이동

<template>
  <div class="vl-parent">
    <vue-loading
      v-model:active="isLoading"
      :can-cancel="true"
      :on-cancel="onCancel"
      :is-full-page="fullPage"
    />

    <label><input type="checkbox" v-model="fullPage" />Full page?</label>
    <button class="btn btn-primary me-2" @click.prevent="doAjax">
      fetch Data
    </button>
    <button class="btn btn-danger" @click.prevent="onCancel">Cancel</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      fullPage: true
    }
  },
  methods: {
    doAjax() {
      this.isLoading = true
      // simulate AJAX
      setTimeout(() => {
        this.isLoading = false
      }, 5000)
    },
    onCancel() {
      this.isLoading = false
      console.log('User cancelled the loader.')
    }
  }
}
</script>