Vuelayers "projection.getCode is not a function" when using ol/proj module

Question

I'm trying to use the vuelayers API in a vue application. I've imported ol itself too, as I couldn't get the ol-ext module to work. When trying to use the proj functions (specifically addProjection()) I get the following error:

Uncaught TypeError: projection.getCode is not a function

main.js

import { createApp } from 'vue'
import App from './App.vue'
import VueLayers from 'vuelayers'
import 'vuelayers/dist/vuelayers.css'
import 'ol'

createApp(App).mount('#app')

ExampleComp.vue

<template>
  <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" style="height: 400px">
    <vl-view :projection="projection" :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>

    <vl-layer-image id="xkcd">
      <vl-source-image-static :url="imgUrl" :size="imgSize" :extent="imgExtent" :projection="projection"
                              :attributions="imgCopyright"></vl-source-image-static>
    </vl-layer-image>
  </vl-map>
</template>

<script>
import { addProjection, createProjection } from 'ol/proj'

  let size = [1024, 968]
  let extent = [0, 0, ...size]

  let customProj = createProjection({
    code: 'xkcd-image',
    units: 'pixels',
    extent,
  })
  
  addProjection(customProj)

  export default {
    data () {
      return { 
        zoom: 2,
        maxZoom: 8,
        center: [size[0] / 2, size[1] / 2],
        rotation: 0,
        projection: customProj.getCode(),
        imgUrl: 'https://imgs.xkcd.com/comics/online_communities.png',
        imgCopyright: '© <a href="http://xkcd.com/license.html">xkcd</a>',
        imgSize: size,
        imgExtent: extent,
      }
    },
  }
</script>

I don't have enough experience with this to know if the absence of a getCode() function is an issue with the module of my code.