Dino Winchester

https://jsfiddle.net/5wtopLka/

Использовать относительные пути.

Не надо indexOf, индексы доступны в v-for без каких-либо дополнительных телодвижений:

<div v-for="(row, iRow) in rows" class="board__rows">
  <div
    v-for="(col, iCol) in columns"
    v-text="col + row"
    :class="[ [ 'white', 'black' ][(iRow ^ iCol) & 1], 'board__square' ]"
  ></div>
</div>

Если тупо получать то, что указано в тексте вопроса, тогда

const result = Object
  .entries(arr.reduce((acc, n) => ((acc[n.name] ??= []).push(n.value), acc), {}))
  .reduce((acc, [ k, v ]) => (acc[k] = v.length === 1 || v, acc), {});

Но почему

ThirdName: true

??

В самом деле так и надо, или всё-таки там должна быть строка с датой из исходного массива? А что если значения повторяются? Вот вариант с получением только уникальных значений и без дурацкого true там, где значение одно:

const result = Object
  .entries(arr.reduce((acc, n) => ((acc[n.name] ??= new Set).add(n.value), acc), {}))
  .reduce((acc, [ k, [...v] ]) => (acc[k] = ~-v.length ? v : v[0], acc), {});

Вынеси значение scale в переменную:

.clouds:nth-child(2) {
    --scale: 2;
    top: 180px;
    left: 28px;
    z-index: 2;
}

.cloud {
    animation: scale 3s infinite alternate;
}

@keyframes scale {
    from {
      transform: scale(var(--scale));
    }
    to {
      transform: scale(calc(var(--scale) / 2));
    }
}

P.S. не использую раздельные свойства для трансформаций, они еще плохо поддерживаются https://caniuse.com/mdn-css_properties_scale

Делаем загадочные движения руками, незаметно меняем тег br на td и... Магия!

foreach($row as $v) {
    echo "<td>$v</td>";
}

Но на самом деле обычно так не делают, и действительно вытаскивают "что-то одно". Попутно разделяя работу с SQL и HTML и защищаясь от инъекцй. Для этого:

• сначала получаем нужные на странице данные. Если выводим список, то записываем его в массив
  
• только после того как все данные получены и обработаны, можно начинать вывод. В простейшем варианте закрываем тег РНР и начинаем выводить HTML и в нужных местах - запрошенные выше данные
  
• не забывая их в обязательном порядке экранировать
  
  

$data = $mysqli->query('SELECT * FROM users')->fetch_all(MYSQLI_ASSOC);
?>
<table>
  <?php foreach($data as $row): ?>
    <tr>
        <td><?=htmlspecialchars($row['id'], ENT_QUOTES) ?></td>
        <td><?=htmlspecialchars($row['name'], ENT_QUOTES) ?></td>
        <td><?=htmlspecialchars($row['email'], ENT_QUOTES) ?></td>
    </tr>
  <?php endforeach ?>
</table>

Не всё так радужно, как задумывалось, но смысл в их использовании есть.
От каких то тэгов больше - от каких то меньше.
Но если что-то можно сделать не прилагая почти никаких усилий и получить от этого пользу, то почему этого делать не стоит?

https://habr.com/ru/company/htmlacademy/blog/546500/

Основных поинтов использования семантики 3.
1) Использование подходящих элементов делает их использование удобнее. Несколько раз встречал когда ссылки делали дивами с js поверх. Нет возможности нажать на них колёсиком чтобы открылаьс в новой вкладке или правой кнопкой с соответствующем ссылке контекстным меню. Это отвратительно неудобно.
2) это помощь людям с ограниченными возможностями для понимания контекста происходящего на экране. Наглядный пример это ссылки внутри тэга nav. Можно побаловаться со скрин ридером и будет понятно о чём речь.
Если коротко: ссылки в div будут озвучены как: *ссылка*.
Ссылки в nav: "ссылка, навигация"
https://vc.ru/promo/132280-kak-zvuchat-sayty-nezry...
https://www.youtube.com/watch?v=RQiN1Hhrxu0
3) Помощь поисковым ботам понимать контекст и формировать снипеты в поисковой выдаче. Пример есть в статье выше.
https://siteclinic.ru/blog/technical-aspects/html5...

с какой-либо из «сторон дела»: пользователя, верстки, программирования, поисковых систем?

1) Про пользователей выше
2) Про вёрстку - удобнее читать
3) Про программирование - использование верных тэгов соответствующим образом влияет на работу с этими элементами в JS либо избавляет от необходимости в JS в принципе.
4) Про поисковые системы выше.

border-image

Для полупрозрачного уголка можно css-masks использовать, либо просто вставить svg как data-url в background-image

Как перемножить элементы массива:

const mul = arr => arr.reduce((acc, n) => acc * n, 1);

Бежим по массиву с количествами элементов, получаем из массива с данными подмассивы указанной длины, перемножаем их содержимое:

const result = count.map(function(n) {
  return mul(data.slice(this[0], this[0] += n));
}, [ 0 ]);

Или, если массив с данными больше не понадобится, можно всегда вырезать у него из начала указанное количество элементов:

const result = count.map(n => mul(data.splice(0, n)));

Есть такой свойство, is, указываете в него компонент и нет проблем.
<Component :is="currentComponent">
И в нужных методах меняете этот currentComponent на компонент, который нужно показать.
Вот примерчик набросал https://jsfiddle.net/set9x5fj/

<div id="app">
  <h2>Toster</h2>
  <Component :is="currentComponent"></Component>
  <input type="button" @click="showComp1" value="showComp1">
  <input type="button" @click="showComp2" value="showComp2">
</div>

Vue.component("comp1", {
	template: "<div>Hello from comp1</div>"
});
Vue.component("comp2", {
	template: "<div>Hello from comp2</div>"
});
new Vue({
  el: "#app",
  data: {
     currentComponent: "comp1"
  },
  methods: {
  	showComp1() {
    	this.currentComponent = "comp1";
    },
    showComp2() {
    	this.currentComponent = "comp2";
    }
  }
})