Behavior of :deep syntax in <style lang='less' scoped> differs from Webpack implementation

// app.vue
<template>
  <div class="content">
    <Com />
  </div>
</template>
<script setup lang="ts">
import Com from './Com.vue';
</script>

<style scoped lang="less">
.content {
   :deep(.Com) {
    &-title {
      font-size: 3rem;
    }
  }
}
</style>

// Com.vue
<template>
  <div class="Com">
    <div class="Com-title">Component</div>
  </div>
</template>

Expected .Com-title to have font-size: 3rem, but the style doesn't penetrate when using Vue's recommended :deep(x) syntax. However, using ::v-deep works normally.

https://github.com/ununian/less-deep-demo

::v-deep

:deep()

Reproduce the behavior from the linked less-deep-demo using the provided app.vue and Com.vue examples. Compare the generated styling for :deep(.Com) with the working ::v-deep form; done means the .Com-title rule applies with font-size: 3rem under the scoped less style.