【Vue.js】非同期コンポーネントの関数を親から呼ぶ

非同期コンポーネントの読み込みフラグを立てた直後に$refs['my-modal'].showModal()やmyModalRef.value.showModal()で呼んでも「そんなテンプレート参照無いんだけど!」って怒られたのでその対応です。
※"my-modal"は任意のref属性です

前提

• Vue3のCompositionAPIを使用します。
• コンポーネントを非同期(defineAsyncComponent)で読み込みます。
  • Vue.js 非同期コンポーネント

nextTickは?

nextTickは非同期コンポーネントの読み込み完了まで待機していないようです(要検証)。

        //isAsyncModalRef.value = true; <- v-if=trueによる非同期コンポーネント一回限りの読み込み
        nextTick(()=>{
          console.log(myModalRef.value); //->null
          myModalRef.value?.showModal();//呼ばれない
        });

解決方法

初回に限りwatchでテンプレート属性を監視して呼びます。2回目以降はmyModalRefに値が入っているのでそのまま呼ぶことができます。

• Vue.js テンプレート参照の監視

/*setup関数内*/
     const myModalRef = ref(null);

     function _loadedModal(){
          //console.log(myModalRef.value);
          myModalRef.value?.showModal();
      }
      watch(myModalRef,(newVal,oldVal)=>{
        if(!oldVal)_loadedModal();
      },{
        flush: 'post'
      });
    return{
      "my-modal":myModalRef,
      showMyModal(){
            //isAsyncModalRef.value = true; <-非同期コンポーネント読み込み用フラグ
            _loadedModal(); //初回は呼んでもオプショナルチェーンで無視される
      }
    }