resolveComponent can only be used in render() or setup() - laravel

Question

I'm using laravel nova 4 for creating an admin panel. I'm trying to override a existed nova component. This is what I have done:
Create BelongsToField.vue in resources/js/nova/components/Form, then copy all context in vendor/laravel/nova/resources/js/components/Form/BelongsTo.vue
Add fields.js file in resources/js/nova, this is my file:
import BelongsToField from './components/Form/BelongsToField'
Nova.booting((app, store) => {
app.component('FormBelongsToField', BelongsToField);
})
Then create webpack.mix.js:
const mix = require('laravel-mix');
const path = require('path');
mix.setPublicPath('public')
.js('resources/js/nova/fields.js', 'js')
.vue({ version: 3 });
Then, adding script to NovaServiceProvider
public function boot()
{
parent::boot();
Nova::serving(function (ServingNova $event) {
Nova::script('belongs-to-field', __DIR__ . '/../../public/js/fields.js');
});
}
Because laravel nova 4 uses vite instead of webpack, so I migrate back my application to use s webpack following this (I tried with vite, but it doesn't work, so I change to webpack)
After install all dependencies, this is my package.json file:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production",
"prepare": "husky install"
},
"devDependencies": {
"#commitlint/cli": "^17.0.3",
"#commitlint/config-conventional": "^17.0.3",
"#vitejs/plugin-vue": "^2.3.3",
"#vue/babel-plugin-jsx": "^1.1.1",
"#vue/compiler-sfc": "^3.2.22",
"axios": "^0.25",
"form-backend-validation": "^2.3.3",
"husky": "^8.0.1",
"laravel-mix": "^6.0.41",
"lodash": "^4.17.21",
"postcss": "^8.3.11",
"vue-loader": "^16.8.3"
},
"dependencies": {
"#inertiajs/inertia": "^0.11.0",
"inflector-js": "^1.0.1",
"vue": "^3.2.37",
"vuex": "^4.0.2"
}
}
Then I run npm run dev to build .js file to public folder, build process succeeded, but component doesn't show up, and Vue displays a warning
I tried to override by using laravel nova custom field and change component field in .php file to belongs-to-field. Vue file context is copied same with origin file in vendor (BelongsToField.vue). After building component, it worked!
Thus, I think my problem not come from component file, it could be from Vue version or webpack config but I'm just new to Vue and cannot debug this error. Can someone help.
For more information: I've used this approach in laravel nova 3, and it worked.