Nuxt content hot reload yaml file when using in component

Question

I have a ListProjects.vue inside components folder.

ul
    li(v-for="project in projects", :key="project.title")
        a(:href="project.url") {{ project.title }}

I also have projects.yaml in content folder

list:
- title: Project 1
  url: https://www.project1.com
- title: Project 2
  url: https://www.project2.com

If I fetch the content of projects.yaml on my index.vue page and pass as props to ListProjects.vue, hot reload works when I update projects.yaml

ListProjects(:projects="projects.list")

But if I just reference ListProjects on my index, and inside ListProjects.vue fetch content, hot reload do not work.

On both cases I fetch content in this way:

export default {
    data() {
        return {
            projects: [],
        }
    },
    async fetch() {
        this.projects = await this.$content('projects').fetch()
    }
}

Question

Is it possible to make hrm work just by fetching the content inside the component?