titelhalter

Август Милович, Во vue router Вы можете создавать пути с параметрами, например:

{
  path: '/board/:id',
     name: 'Board',
     component: board
}

В самом шаблоне

<li><router-link :to=`/board/${нужный id}`>${Имя доски}</router-link></li>

Внутри компонента board можно получить значение параметра
$router.currentRoute.params.id

По значению этого параметра получайте данные для построения доски. Либо с сервера, либо храните данные в localStorage, либо еще как-то

findIndex ждет функцию в качестве параметра. Если в массиве мы ищем индекс элемента, у которого поле name совпадает со значением в переменной name, то нужно
vm.roles.findIndex(item => item.name == name)

(arr.find(item => item.id == {нужный id}) && true) || false

Нужно сделать escape, не вычислять данные less`ом, а отправить в css "как есть", для этого используется синтаксис ~"exp", то есть нужно написать
~"calc((100% / 3) - 20px)"

Внешние css подклюсаются с помощью тега link. <link rel="stylesheet" href="{путь}">
А скрипты с помощью тега script. <script src="{путь}"></script>

Тег script нужно закрывать, link - нет

Ну и sass нужно скомпилировать в css. В таком виде он не будет работать

b > 50 && b == 50

Больше 50, но одновременно и равно 50, такого не бывает. Нужно тогда проверять b >= 50.
Во-вторых, вы говорите, что нужно проверять строку, а операция b > 50, приведет b к числу. Для получения длины строки нужно обратиться к свойству length.

Проверить на строку можно с помощью оператора typeof, чтобы взять первые 50 символов строки можно воспользоваться методом slice(start, end).

Сейчас Ваша функция вообще не выполняет поставленную задачу.

num = arr.slice(3,-2)

Вы пытаетесь вернуть массив из элементов с 3 по -2 из оригинального массива.

Вам нужно что-то похожее на:
arr.forEach(x => (String(x)[0] == 3 || String(x)[0] == 7) && console.log(x));
Либо можно отсортировать массив и записать его в переменную для дальнейшей работы.
let filteredArr = arr.filter(x => String(x)[0] == 3 || String(x)[0] == 7);

Не слышал про css guards, но они есть в препроцессере less. По сути это условия, выполнение или невыполнение которых ведет к разным результатам. Простой пример из документации less:

.mixin(@a) when (@media = mobile) { ... }
.mixin(@a) when (@media = desktop) { ... }

Условия внутри when и есть guards. Другой пример - цикл (на самом деле в less нет циклов, но есть рекурсия, выходить из которой и помогает guard).
.

loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}