TypeError: Cannot read properties of undefined (reading 'component') in app.js

what i am doing wrong here. I'm using vue3 and laravel 9. I have following vue file. Plus i have properly used this component in my blade. All required files are imported as required.

   <template>
  <form method="POST" @submit.prevent="register" @keydown="form.onKeydown($event)">
<AlertError :form="form" />
<div id ="text">
</div>
<div class="mb-3">
<label for="message">Message</label>
<div>
  <input
    id="message"
    v-model="form.message"
    type="text"
    name="fmessage">
</div>
<HasError :form="form" field="message" />
</div>
<Button :form="form" >
 Send
</Button>
</form>
</template>
<script>
export default {
data () {
return {
form: new Form({
fmessage: '',

})
 }
 },
methods: {
register () {
this.form.post('/formSubmit').then(( response ) => { 
var attr = document.getElementById("text");
 attr.innerHTML = response.data.message;  
 this.form.reset();
 })
  },
  }      
   }

require('./bootstrap');
window.Vue = require('vue').default
import Form  from 'vform'
import { HasError, AlertError } from 'vform/src/components/bootstrap5'
 window.Form = Form;
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
//component
 Vue.component('message-form', require('./components/message.vue').default);
 const app = new Vue({
 el: '#app',
  });

component is not rendering and console shows following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'component')
at eval (app.js?e348:9:5)
at Module../resources/assets/js/app.js (app.js:424:1)
at __webpack_require__ (app.js:926:42)
at app.js:1091:64
at Function.__webpack_require__.O (app.js:963:23)
at app.js:1093:53
at app.js:1095:12