[Vue warn]: Failed to resolve component, possible import error

I made a Vue3 project using the Vue CLI, and have a parent component('ReactionTimer') and a child component('Block') in the same folder('./components/'). I tried importing 'Block' into 'ReactionTimer', but got the following error:
[Vue warn]: Failed to resolve component: Block at ReactionTimer

ReactionTimer.vue

<template>
    <h1>Reaction Timer</h1>
    <button @click="startTimer" :disabled="isTimerOn">Play</button>
    <Block v-if="isTimerOn" :delay="delay" />
</template>

<script>
import Block from '../components/Block'


export default {
    name: 'ReactionTimer',
    components: {},
    data() {
        return {
            isTimerOn: false,
            delay: null
        }
    },
    methods: {
        startTimer() {
            this.delay = 2000 + Math.random() * 5000;
            this.isTimerOn = true
            //console.log(this.delay)
        }
    }
}
</script>

Block.vue

<template>
  <div class="block">
      click me
  </div>
</template>

<script>
export default {
    props: 'delay'
}
</script>

<style>
    .block {
        width: 400px;
        border-radius: 20px;
        background: green;
        color: aliceblue;
        text-align: center;
        padding: 100px 0;
        margin: 40px auto;
    }
</style>

I tried every combination of
import Block from '../components/Block'
import Block from '../components/Block.vue'
import Block from './Block'
import Block from './Block.vue'