eugenedrvnk

Если RTL-языков не будет https://jsfiddle.net/nob5qwt3/

Зависит от того, что делает компонент.
Если вы создали свой компонент, блок с товаром или подобные, то лучше 1й вариант.
Т.к. вы скорей всего большую часть опций будете выводить внутри шаблона, а проще это выглядит, когда свойство состоит из 1 элемента цепочки. Да и отладка будет куда проще с таким подходом.

data.props.title vs title

2й вариант лучше подходит, когда компонент - это обёртка для какой-то библиотеки, слайдера например и т.п.. Проще говоря, так удобнее передавать данные, когда вы с ними в самом компоненте не работаете на прямую, а лишь передаёте для инициализации библиотеке. Ведь у неё может быть 100500 опций. Их проще передавать именно таким способом.

Вывод, создавайте отдельные пропсы для тех свойств, с которыми будете напрямую работать в компоненте, выводить в шаблоне, в вычисляемых свойствах или же просто внутри методов.
А те, с которыми не будете, исходя из пункта 2, передавайте цельным объектом. Иначе замучаетесь каждую опцию описывать в виде пропса.

Главное что бы было в одном стиле. А уж в каком -- это уже как лично вам или внутри вашей команды удобнее.

Верстка на rem-ах производится с вычислением от корня документа, т.е. body, html, а em от родителя. Притом если у родителя нет изменения в размере font-size, то поиск изменения будет подниматься вверх вплоть до корня.

Пример тут.

PS: такой подход позволяет на десктопа указать в html, body{ font-size: 20px, а для таблеток и мобильных html, body{ font-size: 16px и верстка будет пересчитана сама.

Необходимо гранулярнее делить на блоки, тогда часть специфичной семантики из названия элемента уедет в новый блок (что укоротит вложенные элементы).

Текстовая часть напрашивается быть независимым блоком, причем, маркированным списком. Например, структура может быть такой:

.advantages-card (&--reversed)
    &__description // текстовая часть
    &__picture

.bullet-list
    &__item
    &__item-heading
    &__item-description

То есть в разметке это будет что-то вроде:

<div class="advantages-card">
  <ul class="bullet-list advantages-card__description">
    <li class="bullet-list__item">
      <header class="bullet-list__item-heading">User Journey</header>
      <p class="bullet-list__item-description">Description long text</p>
    </il>
  </ul>
  <img class="advantages-card__picture" :src="block.imgURL">
</div>

Кроме того, я бы рекомендовал избегать сокращения "description" в "desc", потому что туда идеально укладывается не менее популярный термин "descending".

А выбирает цвет кто? Компонент parent? Или кто-то выше?
Если второй случай, тогда, полагаю, пропсы в любом виде, или inject.

Иначе, такой вопрос: Текст может быть только красным? Или существует вероятность что понадобится другой цвет? Если второй вариант, тогда, полагаю, кастомное свойство будет уместно:

<template>
<div class="parent">
  <Child1 class="child1">
    <Child2 class="child2" :style="'--text-color: ' + textColor">
    </Child2>
  </Child1>
</div>
</template>

Иначе, просто добавляйте класс, так как вам удобно исходя из конкретного случая.

P.S. С БЭМ не работал, поэтому рекомендации могут не соотносится с данной методологией.

Всё просто до безобразия.
Если при изменении размера шрифта у корневого элемента этот отступ должен изменится, то в rem.
Если он зависит от текущего шрифта, то в em.
Если не зависит ни от чего и всегда постоянен, то в px.

Вы создаете шаблон (Назовем его, first.blade.php), вставляете в него @yield():

<div class="example">
    @yield('content')
</div>

Затем вы наследуете от этого шаблона другой шаблон (second.blade.php) и прописываете в него конструкцию @section() с тем же именем, что указали у yield:

@extends('first')

@section('content')
    Hello, World!
@endsection

Теперь вы рендерите второй шаблон:

class Controller
{
    public function indexAction()
    {
        return view('second');
    }
}

Рендерится вот такая страница:

<div class="example">
    Hello, World!
</div>

Таким образом, получается, что @yield() служит своеобразным маркером, на место которого будет подставлено содержимое @section() дочернего шаблона.

На самом деле set в данном случае вообще не нужен. Те свойства, которые есть в объекте лежащем в data на момент создания инстанса компонента, становятся реактивными по умолчанию: тык.
Set использовать нужно только для тех свойств, которых ещё не было.

Логично же, что они выводятся в порядке попадания в стэк.
Промисы - как раз микротаски, но сначала в стэк (для микротасков - это microtask queue) отправляются 4 и 7 (в общей фазе), потом 4 выполнится и добавит 5 после 7. Потом выполнится 7 и добавит в стэк 9. Ну и так далее.
На 10 microtask queue будет исчерпан и итерация будет закончена.
А 2 выполнятеся уже в следующей итерации цикла.

upd. Поправил ответ.

например так:

img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

Все так же при помощи медиа-запросов.

Все варианты верные. По большей части разница в том что некоторые адреса проще роутить на разные микросервисы. Ну и личное предпочтение играет большую роль.

UPD. А использовать get параметры в таком виде считается моветоном, но в основном по тому что так труднее использовать однотипные адреса и "вложенные" ресурсы

Варианты тут такие:

1. Погуглить jq аналоги нативных функций или хотя бы на https://youmightnotneedjquery.com/ заглянуть, и переписать самостоятельно
   
2. Отправиться на фриланс, заплатить денег
   
3. Подождать, пока кто-нибудь тут над вами не сжалится и не напишет код просто так (это я и сам сделаю, но чуть позже, не сегодня)
   

UPD.

$('#myselect').change(function() {
  $('#mydiv').text(`Вес брутто*: ${$(':selected', this).attr('for')} кг`);
});