Rider with Vue.js: Breakpoints aren't hit if the template has too many div containers

I've followed your guide on how to use Rider for Vue.js development. I created an empty solution, created my vue project with “npm create vue@latest” and added the folder in my solution view as an “existing folder”. After installing my packages with npm install, setting up my debug configurations, everything works fine:

"
VITE v7.3.1  ready in 1132 ms

 ➜  Local:   http://localhost:5173/
 ➜  Network: use --host to expose
 ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
 ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
 ➜  press h + enter to show help
"

Now to the issue:

For better reproducibility, I use the default template created with the “create vue” command. In the HomeView.vue file, I wanted to debug something in the “onMounted” function. The file looks like this:

"
<script lang="ts" setup >
import TheWelcome from '../components/TheWelcome.vue'
import {onMounted} from "vue";

onMounted(() => {
  console.log("Hello World")
})
</script>

<template>
  <main>
    <TheWelcome />
  </main>
</template>

"

If I set a breakpoint to the “console.log” in the onMounted function, the breakpoint hits perfectly as it should. After adding another div to the template part, the breakpoint stops working:

"

<template>
  <main>
    <div>
    <TheWelcome />
    </div>
  </main>
</template>

"
 

I've changed nothing except this file. And i can reproduce this behavior in two different projects.

Is this supposed to work like this?