Custom Field not displaying in Nova 4

Hello, I have a Laravel 8.83.27 project that I am upgrading to Laravel 9.52.4 and I am running into some trouble with a custom Nova Field that I have developed. In my Laravel 8 environment I am running Nova 3.30.0, and I have a custom field that embeds a GrapesJS editor in a Nova FormField. It works wonderfully in the Laravel 8 environment, as well as Laravel 9 with Nova 3.31. The problem has arisen after upgrading to Laravel 9.52.4 and Nova 4.22.1. The custom field doesn't display when viewing either of the Nova pages that it is on, with no errors or relevant information in the console or the Laravel logs.

I followed the Laravel 8 to 9 upgrade guide (laravel.com/docs/9.x/upgrade) when upgrading Laravel, and I followed the Nova 3 to 4 upgrade guide (nova.laravel.com/docs/4.0/upgrade.html) when upgrading Nova. I updated the Composer and npm dependencies in the custom Nova field in order to get it building again, and since one of these changes was upgrading from Vue 2.5 to 3.2.38 I also looked at the migration guide (v3-migration.vuejs.org/) but didn't see anything that seemed to be relevant to my code (I am not skilled in Vue, so this judgement should be taken with a grain of salt).

I have noticed that in Nova 3 my custom field is rendered on the page inside the element defined in the tag in FormField.vue file. I have some custom javascript that is included by my .vue files and does work with the "editor" div.

Template definition:

<template>
    <div id="editor"></div>
</template>

Rendered content:

<div id="editor" class="remove-bottom-border gjs-editor-cont" style="width: 100%; height: 900px;">...form contents here...</div>

In Nova 4 I get a custom html tag that is named the same as the Nova.inertia call made in my field.js, but there is nothing inside this tag and nothing that resembles the contents of the tag in FormField.vue.

Template definition:

<template>
    <DefaultField :field="field">
        <template #field>
            <div id="editor"></div>

            <p v-if="hasError" class="my-2 text-danger">
                {{ firstError }}
            </p>
        </template>
    </DefaultField>
</template>

Rendered content:

<form-grapesjs-editor-field index="3" errors="[object Object]" resource-id="21" resource-name="pages" field="[object Object]" via-resource="" via-resource-id="" via-relationship="" shown-via-new-relation-modal="false" form-unique-id="je5sz11mvqv" mode="form" show-help-text="true"></form-grapesjs-editor-field>

I'm hoping that I've just missed something that will be easy to spot by someone with more experience with Nova and custom fields. Here are the contents of a few important files (happy to add more as requested):

webpack.mix.js:

let mix = require('laravel-mix')

require('./nova.mix')

mix
  .setPublicPath('dist')
  .js('resources/js/field.js', 'js')
  .vue({ version: 3 })
  .sass('resources/sass/field.scss', 'css')
  .nova('{{ name }}')

nova.mix.js:

const mix = require('laravel-mix')
const webpack = require('webpack')
const path = require('path')

class NovaExtension {
  name() {
    return 'nova-extension'
  }

  register(name) {
    this.name = name
  }

  webpackConfig(webpackConfig) {
    webpackConfig.externals = {
      vue: 'Vue',
    }

    webpackConfig.resolve.alias = {
      ...(webpackConfig.resolve.alias || {}),
      'laravel-nova': path.join(
        __dirname,
        '../../vendor/laravel/nova/resources/js/mixins/packages.js'
      ),
    }

    webpackConfig.output = {
      uniqueName: this.name,
    }
  }
}

mix.extend('nova', new NovaExtension())

field.js:

Nova.booting((Vue) => {
    Nova.inertia('detail-grapesjs-editor-field', require('./components/DetailField').default);
    Nova.inertia('form-grapesjs-editor-field', require('./components/FormField').default);
})

Thank you so much for reading this, as well as in advance for any help or insights you can provide!