Vuejs 3 props are all undefined

I know this has been asked before but nothing I've tried works, even the official docs

I have a view sample vue component and I want to pass a prop so I can display it

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        {{ title }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from "vue";
const props = defineProps({
  title: String
})

console.log(props.title);


</script>

app.js

import { createApp } from 'vue';
import Example from './components/ExampleComponent.vue';

const app = createApp({});

app.component('example', Example);
app.mount('#app');

I call my component like this

<example :title="xgfgdgdgsgdg"></example>

Nothing is displayed in the template and also config.log() says undefined

I am using the latest version of vue3 and building using Vite

Using a prop with : means you assign a JS expression to the prop. In your case it's just an undefined identifier.

Either use a proper expression:

<example :title="'xgfgdgdgsgdg'"></example>

Or remove : to make the prop a string:

<example title="xgfgdgdgsgdg"></example>