BootstrapVue Load Modal JavaScript Dynamically Only When Shown (Nuxt)

<template>  <b-modal v-model="localShow" size="lg" title="Link" :no-close-on-backdrop="true" @ok="saveLink" style="z-index:2;" :body-class="busy ? 'position-static' : ''">    <b-overlay :show="busy" no-wrap></b-overlay>    <link-form ref="linkForm" :item="link"  />  </b-modal></template><script>import Vue from 'vue'import { ModalPlugin, OverlayPlugin } from 'bootstrap-vue'Vue.use(ModalPlugin)Vue.use(OverlayPlugin)export default {  props: ['value', 'link'],  data() {    return {      localShow: this.value,      busy: false    }  },  methods: {    close() {      // this.$emit('update:value', false)      this.$emit('input', false)    },    async saveLink(bvModalEvent) {      bvModalEvent.preventDefault()      this.busy = true      // perform action      // call this when done / completed      this.close()    },  },  watch: {    value(value) {      this.localShow = value    },    localShow(value) {      // this.$emit('update:value', value)      this.$emit('input', value)    }  },  mounted() {    // since this component is dynamically loaded over the network, call the following to end loading animation    this.$nuxt.$loading.finish()  }}</script>

<template>  <client-only>     <lazy-link-form-modal v-model="linkModal" v-if="linkModal" :link="link"></lazy-t-link-form-modal>  </client-only></template><script>export default {  data() {    return {      link: {},      linkModal: false,    }  },  methods: {    showLinkModal() {      // start loading animation as link-form-modal code is loaded dynamically over the network      this.$nuxt.$loading.start()      this.linkModal = true    }  }}  </script>