[Vue warn]: Failed to resolve component Vue3

In vue 3 when i register a component to use i use the following in my .js file:

import blogpost from '../../../blogpost.vue'

app.use(blogpost);

i create a simple component ie BlogPost.vue.

<!-- BlogPost.vue -->
<script>
    export default {
        name: 'BlogPost',
        props: ['title']
    }
</script>

<template>
    <h4>{{ title }}</h4>
</template>

In my html file i call the following:

<div id="app">
   <blogpost title = 'test'/>
</div>

When i run the app i get the following

runtime-core.esm-bundler.js?fea0:38 [Vue warn]: Failed to resolve component: blogpost If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Its like vue cant render the componenet. I am using webpack to compile so if i put the wrong location in, it errors out. So the location is right i guess?

Is there something i am doing wrong?