Vue 3: Converting Options API component to Composition API (setting container to element - this.$el vs ref?)

Question

I'm having a bit of trouble translating something that works in the options api to the composition api. I'm not really sure how to do the equivalent and maybe I'm just thinking about it the wrong way.

This works for me using the options api:

<template>
<div id="viewDiv">
  </div>
</template>
<script lang="ts">
import { loadModules } from 'esri-loader';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'web-map',
  el: '#viewDiv',
  methods: {
    async loadMap() {
      const [
        WebMap,
        ArcGISMap,
        MapView, 
        Portal, 
        OAuthInfo, 
        esriId
      ] = await loadModules(['esri/WebMap', 'esri/Map', 'esri/views/MapView', 'esri/portal/Portal',
        'esri/identity/OAuthInfo', 'esri/identity/IdentityManager'], { css: true });

    const map = new ArcGISMap({
      basemap: 'streets'
    });

    const view = new MapView({
      container: this.$el,
      map: map,
      center: [-118, 34],
      zoom: 8
    });
    }
  },

  async mounted() {
    this.loadMap()
  },
});

</script>

You see that the container gets set to this.$el.

My current attempt using setup() looks like this:

<template>
<div ref="viewDiv">
  </div>
</template>
<script lang="ts">
import { loadModules } from 'esri-loader';
import { defineComponent } from 'vue';
import { h, ref, onMounted, reactive } from 'vue'

export default defineComponent({
  name: 'web-map',
  setup() {
    const viewDiv = ref(null);
    async function loadMap() {
      const [
        WebMap,
        ArcGISMap,
        MapView, 
        Portal, 
        OAuthInfo, 
        esriId
      ] = await loadModules(['esri/WebMap', 'esri/Map', 'esri/views/MapView', 'esri/portal/Portal',
        'esri/identity/OAuthInfo', 'esri/identity/IdentityManager'], { css: true });

      const map = new ArcGISMap({
        basemap: 'streets'
      });

      const view = new MapView({
        container: viewDiv,
        map: map,
        center: [-118, 34],
        zoom: 8
      });
    }

    onMounted(async() => {
      loadMap();
    });

    return {viewDiv}
  }
});

</script>

At the moment, of course, nothing renders.

It feels like the problem should be obvious, haha. I appreciate any help, guidance, tips. I'm using a template in the example, but if this is more easily accomplished with a render function/if that's a better practice I'd like to know.

Thanks!