BEM mix and Vue.js?

Question

BEM

Is it possible in Vue.js to mix block and element when using nested components?
I want to get this:

<div class="component1">
  <div>component1</div>
  <div class="component1__elem component2">
    <div>component2</div>
  </div>
</div>

But it turns out this:

<div class="component1">
  <div>component1</div>
  <div class="component2">
    <div>component2</div>
  </div>
</div>

The code

<div id="app">
  <component1>
    <component2/>
  </component1>
</div>

Vue.component('component1', {
  template: `
  <div class='component1'>
  	<div>component1</div>
  	<slot class='component1__elem'></slot>
  </div>`
});

Vue.component('component2', {
  template: `
  <div class='component2'>
  	<div>component2</div>
  </div>`
});

new Vue({
  el: '#app'
});

Answer 1

Well, everything turns out right) there is no way to transfer the class to the slot in this way)
1. If the bam notation is so necessary, then wrap the slot in a div with the child class
2. But the best option, in my opinion, would be to get rid of this notation, and here's why :
Stupid vue components shouldn't be big and can contain more than one block just within an exception. 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)

Answer 2

It just works out of the box:

<div id="app">
  <component1>
    <component2 class="component1__elem" />
  </component1>
</div>

The BEM methodology is just perfect for Vue projects.
https://codepen.io/login2030/pen/mdygVRd?editors=1010