vue3 setup中ref获取不到dom

问题遇到的现象和发生背景

问题相关代码，请勿粘贴截图

<template>
  <BasicModal
    v-bind="$attrs"
    destroyOnClose
    @register="register"
    title="Modal Title"
    @visible-change="handleShow"
  >
    <template v-if="loading">
      <div class="empty-tips">加载中，稍等3秒……</div>
    </template>
    <template v-if="!loading">
      <div ref="myCanvas">111</div>
    </template>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  export default defineComponent({
    components: { BasicModal },
    setup() {
      const loading = ref(true);
      const myCanvas = ref();
      const [register, { setModalProps }] = useModalInner();
      function handleShow(visible: boolean) {
        if (visible) {
          loading.value = true;
          setModalProps({ loading: true, confirmLoading: true });
          setTimeout(() => {
            console.log('sdddsdd', myCanvas);
            // console.log(myCanvas.value);
            nextTick(() => {
              console.log(myCanvas.value);
            });
            // let ctx = myCanvas.value.getContext('2d');
            // ctx.lineWidth = 5;
            loading.value = false;
            setModalProps({ loading: false, confirmLoading: false });
          }, 300);
        }
      }
      return { register, loading, handleShow, myCanvas };
    },
  });
</script>
<style scoped>
  .empty-tips {
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
</style>

运行结果及报错内容

undefined

我的解答思路和尝试过的方法

在onMounted中也不行，加上value都没有获取到

我想要达到的结果

目测是因为你myCanvas获取的时候因为v-if的原因并没有渲染出来，使用之前确保已经在页面上显示过了，如果是loading=faslse之后，myCanvas组件才会渲染，并且获取方式应该放在$nextTicket()中