VueJS 3 Warn export component was not found in '@/components/...vue'

I'm using VueJS 3 applications using vue-router, vue and core-js applications where I want using compoments. In the views directory, I have a Home.vue file which looks like this:

<template>
  <div class="wrapper">
    <section v-for="(item, index) in items" :key="index" class="box">
      <div class="infobox">
        <PictureBox image="item.picture" />
        <PropertyBox itemProperty="item.properties" />
      </div>
    </section>
  </div>
</template>

<script>
import { ref } from 'vue'
import { data } from '@/data.js'
import { PictureBox } from '@/components/PictureBox.vue'
import { PropertyBox } from '@/components/PropertyBox.vue'

export default {
  components: {
    PictureBox,
    PropertyBox,
  },
  methods: {
    addRow() {
      console.log('This add new row into table')
    },
  },
  setup() {
    const items = ref(data)

    return {
      items,
    }
  },
}
</script>

I have 2 components in the components directory:

src/components
  |- PictureBox.vue
  |- PropertyBox.vue

PictureBox.vue for example looks like this:

<template>
  <div class="infobox-item-picturebox">
    <img class="infobox-item-picturebox-image" :src="require(`@/static/${image}`)" alt="item.title" />
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  props: {
    image: {
      type: String,
    },
  },

  setup() {
    const state = reactive({
      count: 0,
    })

    return {
      ...toRefs(state),
    }
  },
}
</script>

But I get a warning when compiling:

WARNING  Compiled with 2 warnings 10:58:02 PM

warning  in ./src/views/Home.vue?vue&type=script&lang=js

"export 'PictureBox' was not found in '@/components/PictureBox.vue'

 warning  in ./src/views/Home.vue?vue&type=script&lang=js

"export 'PropertyBox' was not found in '@/components/PropertyBox.vue'


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://172.19.187.102:8080/

Also in browser developer mode, I see the same warnings:

My directory structure looks like this:

And this is my main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import './assets/style.css'

createApp(App).use(router).mount('#app')

This is the router page (I'm not using router actually looks like here):

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
})

export default router

Please, can you help me why I have this warning and my content from <template> in PictureBox or in PropertyBox was not loaded? Thank you so much for any advice

The component instance is exported as default (export default {...) in its single file and it should be imported like :

 import PictureBox  from '@/components/PictureBox.vue'

instead of:

import { PictureBox } from '@/components/PictureBox.vue'