【报Bug】vue组件样式不写scoped属性 启动第一次编译默认是scoped,修改组件热更新后恢复正常

我创建一个Group组件,把Group组件拆分成GroupHeader,GroupBody组件;
我又创建了一个TextareaGroup组件 并复用Group,GroupHeader,GroupBody组件的结构,并使用子组件中的class;
然后就出现了scoped问题.

Group.vue组件

<template>  
  <view class="group">  
    <slot name="header">  
      <group-header/>  
    </slot>  
    <slot>  
      <group-body/>  
    </slot>  
  </view>  
</template>  

<script setup>  
import GroupHeader from './GroupHeader.vue';  
import GroupBody from './GroupBody.vue';  
</script>  

<style lang="scss">  
.group {  
  display: flex;  
  flex-direction: column;  
  margin-bottom: 10px;  
  border: 1px solid #d4ebff;  
  border-radius: 5px;  
}  
</style>

GroupHeader.vue组件

<template>  
    <view class="group-header">  
        <slot>  
        <image class="header-icon" src="/static/logo.png"></image>  
        <text class="header-title" v-text="title"></text>  
        <i class="header-icon close-icon">X</i>  
        </slot>  
    </view>  
</template>  

<script setup>  
    const props = defineProps({  
    title: { type: String, default: '标题' }  
  })  
</script>  

<style lang="scss">  

.group-header{  
  display: flex;  
  padding: 10px 5px 10px 10px;  
  background-color: #d4ebff;  
  color: #646cff;  
  align-items: center;  
  flex-grow: 1;  
  line-height: 24px;  
  box-sizing: border-box;  
  >.header-icon{  
    display: inline-block;  
    width: 24px;  
    height: 24px;  
    text-align: center;  
  }  
  >:last-child.header-icon{  
    width: 24px;  
  }  
  >.header-title{  
    display: inline-block;  
    font-size: 16px;  
    font-weight: bold;  
    flex-grow: 1;  
    padding-left: 10px;  
  }  
  >:first-child.header-title{  
    padding-left: 0;  
  }  
}  
</style>

GroupBody.vue 组件

<template>  
    <view class="group-body">  
    <slot></slot>  
    </view>  
</template>  

<script>  

</script>  

<style lang="scss">  
.group-body{  
  padding: 10px 0 0 10px;  
  >.group{  
    border-right: none;  
  }  
}  
</style>

TextareaGroup.vue组件

在TextareaGroup组件中复用GroupHeader.vue组件 class header-title

<script setup>  

import Group from "./Group.vue";  
import GroupHeader from "./GroupHeader.vue";  
import GroupBody from "./GroupBody.vue";  
</script>  

<template>  
  <group>  
    <template #header>  
      <group-header>  
        <image class="header-icon" src="/static/logo.png"></image>  
        <text class="header-title" v-text="'文本域'"></text>  
        <i class="header-icon close-icon">X</i>  
      </group-header>  
    </template>  
    <GroupBody>  
      <textarea class="textarea" placeholder="请输入内容" rows="5"></textarea>  
    </GroupBody>  
  </group>  
</template>  

<style lang="scss">  
  .textarea{  
    display: block;  
  }  
</style>