How to properly use BEM in Vue?

Question

BEM

I will say right away that I may not convey the essence of the issue the first time, since there are a lot of details. The question is more likely not to be answered in one line, but for reasoning. If something is missing, ask, I will answer, because it’s interesting to figure it all out :))
Question about layout organization in vue components. I read on many forums that the concepts of "vue-component" and "block in BEM" are almost identical in terms of layout. That is, the conditional vue-component == .list-component in BEM. But in practice, there are often times when it is better to use several BEM blocks in a vue component (usually this block can be used in several components and does not carry any functional actions (that is, it does not need to be moved to a separate vue component, since it is required only its identical css design)). For convenience, for each individual BEM block, I create a separate scss file and import it in the required vue component

@import "assets/scss/components/public/user-elements/arrow"; // простой БЭМ блок
  @import "assets/scss/components/public/component/lesson-about"; // простой БЭМ блок
  @import "assets/scss/components/public/component/times"; // простой БЭМ блок
  @import "assets/scss/components/public/component/finished-lesson"; // БЭМ который совпадает из vue-компонентом

According to BEM, I can use mixins, that is, I can have a block of classes - .arrow.finished-lesson__arrow - in order to slightly correct the "standard" block.
Closer to the essence of the question - is it correct to import a block that is used in several components in each of these components, or can it be connected somehow globally?
plus, if you include a block in each component, this eliminates the use of mixins (after loading a new component with a .arrow block, the .finished-lesson__arrow class ceases to work).
nashchet using scoped - also has its own theory))

Answer 1

In my opinion, you should make separate components in such cases and connect them. Moreover, you yourself said that their identical design is required, which is already enough to be moved into a separate component (components are not required to carry a functional component). So there will be much less code in the templates, no need to include css and figure out how to globally include styles that should not be global)
1. Stupid vue components should not be large and can contain more than one block only within the exception.
2. From this follows the conclusion that although the BEM methodology remains almost unchanged, it is not worth dragging all the BEM notation into vue files. For example: you can get rid of adding a block class between element classes, since there is only one block, and the classes are unique thanks to scoped. (The only thing you need to take into account is that the parent of the component can refer to the root block by class, but these are already particulars)
Something like this)