Vuejs3 props getting undefined from laravel blade to vue component

Question

here is the blade file

@extends('layouts.master')
@section('content')
<div id="app">     
  <demo test="fsdf"></demo>  
</div>
<script src="{{asset('js/app.js')}}"></script>
@endsection

here is the app.js file

import {createApp} from 'vue';
import Demo from './components/Demo.vue';

const vue3App = createApp(Demo);
vue3App.mount('#app');

here is the Demo.vue file

<template>
<h1>Demo</h1>
</template>
<script>
export default {
    props: ['test'],
    setup(props) {
        console.log(props);
    }
}
</script>

The props always showing undefined in the Demo Component!.Don't know what i missed. Also I am using laravel-mix of 6.0.34.

Answer 1

It's undefined because you have to regsiter the component first

    import {createApp} from 'vue';
    import Demo from './components/Demo.vue';
    
    const app = createApp({
       mounted() {
          console.log('The app is working')
       }
    });
    app.component('demo', Demo); //global registration
    app.mount('#app');