你不一定要使用 scoped attribute。
设置作用域也可以通过 CSS Modules，
那是一个基于 class 的类似 BEM 的策略

<template>
  <button class="button button-close">X</button>
</template>

<!-- 使用 `scoped` attribute -->
<style scoped>
.button {
    
    
  border: none;
  border-radius: 2px;
}

.button-close {
    
    
  background-color: red;
}
</style>



<template>
  <button :class="[$style.button, $style.buttonClose]">X</button>
</template>

<!-- 使用 CSS Modules -->
<style module>
.button {
    
    
  border: none;
  border-radius: 2px;
}

.buttonClose {
    
    
  background-color: red;
}
</style>



<template>
  <button class="c-Button c-Button--close">X</button>
</template>

<!-- 使用 BEM 约定 -->
<style>
.c-Button {
    
    
  border: none;
  border-radius: 2px;
}

.c-Button--close {
    
    
  background-color: red;
}
</style>