How to name classes in vue components?

Question

Vue.js

How to write classes in vue components correctly? With component name prefix? (meaning best practice)

Option 1:

// TodoItem.vue
<template>
  <div class="todo-item">
    <div class="todo-item-left">...</div>
    <div class="todo-item-button">...</div>
  </div>
</template>

Option 2:

// TodoItem.vue
<template>
  <div class="todo-item">
    <div class="left">...</div>
    <div class="button">...</div>
  </div>
</template>

Option 3:

// TodoItem.vue
<template>
  <div class="todo-item">
    <div class="todo-item__left">...</div>
    <div class="todo-item__button">...</div>
  </div>
</template>

In the second option, there is an unpleasant feature if there is a Title.vue component with the content:

// Title.vue
<template>
  <div class="title">Заголовок</div>
</template>

And we import it into another component, which already has its own title:

// Home.vue
<template>
  <div class="home">
    <Title/> // Конфликт c class="title"
    ....
    <div class="title"></div>
  </div>
</template>

Then the Title.vue component will have a class conflict, it will be affected by styles from Title.vue, and from Home.vue

What is a good practice for naming classes?

Answer 1

Try the second option if you like, but add scoped in the component
In theory, the styles will not overlap
<style scoped>

Answer 2

BEM? Those. Block(functional)-element-modifier. There should be no intersections due to the fact that the functional blocks are not duplicated in DIFFERENT components (i.e. for one functional block one component)