pegas

inpur[required]:invalid {} - псевдокласс invalid, смотрите поддержку браузеров
Либо при валидации добавлять доп.класс и стилизовать через него

joxi.ru/Vm6bMk3uDg95Em

Терминология не относится именно к этому инструменту, она универсальная. Если пытаться как-то объяснить ее своими словами, то:

• Asset - актив, полезная вещь (в нашем контексте - файл), которую мы используем для чего-либо. Например используете иконку на странице - она есть ассет. То же самое относится к скриптам, файлам со стилями и.т.д.
  
• Bundle - связка, пучок; набор вещей, объединенных в одну кучу. В нашем контексте это набор ассетов (отдельных полезных файлов), собранных хитрым образом в один большой файл.
  

Либо выкачиваете сайт полностью:

$ wget -r -k -l 7 -p -E -nc -w 1 -erobots=off --user-agent="Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 Safari/537.36" https://www.example.com

потом ищете либо как советовалось выше (ищет только в .js файлах директории www.example.com):

$ find www.example.com/ -name '*.js' -exec grep -H 'blablabla' {} \;

либо так (найдет все упоминания blablabla во всех файлах директории www.example.com):

grep -Hr "blablabla" www.example.com/

или можете заюзать поиск по файлам *.js в Notepad++ или другом подобном текстовом редакторе.

<div class="block-calculations__panel" v-for=" (i, index) in arr ">
        <span :data-col="index" @click="isActive =i" v-bind:class="isActive==i?'active':''"></span> 
    </div>

view

Вместо общего isActive добавьте такое свойство каждому элементу в arr, и меняйте его:

<div v-for="(n, i) in arr" class="block-calculations__panel">
  <span
    :data-col="i"
    :class="{ active: n.isActive }"
    @click="n.isActive = !n.isActive"
  ></span>
</div>

UPD. А, так вам надо, чтобы активным мог быть только один элемент... Переименуйте isActive в просто active, это будет индекс кликнутого элемента. Класс назначайте в случае равенства текущего индекса и active:

<div v-for="(n, i) in arr" class="block-calculations__panel">
  <span
    :data-col="i"
    :class="{ active: active === i }"
    @click="active = active === i ? null : i"
  ></span>
</div>

можно скопировать сайт на локалку, и в тотал коммандере поиск по тексту, в файлах указать *.js

Может быть что-то вроде этого, если есть ssh туда:

$ find -name '*.js' -exec grep -H 'blablabla' {} \;

воспользуйтесь Youtube API

Это название события, можно хоть updateBaz, хоть helloWorld его обозвать.

А что до двоеточия, это вроде namespace'а. Vue в данном случаем сам генерирует название события.

Согласно документации

<comp :foo.sync="bar" :baz.sync="xyz"></comp>

будет преобразовано в

<comp :foo="bar" @update:foo="val => bar = val" :baz="xyz" @update:baz="val => xyz = val"></comp>

И т.д.

Не знаю, что ещё можно добавить к уже сказанному в документации. Думаю, наглядная демонстрация поможет лучше понять, что к чему.

Пример номер раз - key нет. Пример номер два - key есть. Тыкаем кнопочку и смотрим, что происходит со значениями в инпутах. В первом случае они остаются на месте, во втором начинают ездить по кругу (аналогично элементам массива). Почему так? Возвращаемся к процитированному вами отрывку из документации, и осознаём, что в первом случае

Vue использует алгоритм, минимизирующий перемещение элементов

а во втором

Vue изменяет порядок следования элементов, основываясь на изменении порядка ключей

1. Просто переменные в замыкании, как в Вашем примере. Из плюсов - работает везде, из минусов - переменные общие для всех инстансов
2. Просто соглашение, что определенные имена считать приватными и не трогать, общепринятым таким соглашением являются имена начинающиеся с подчеркивания _ - работает везде, но по факту ничего не делает, все на совести кодера
3. Поля символы (Symbol()) - нужен es2015+, по факту тоже не совсем приватные, из вне к ним можно доступ получить если есть доступ к символу (или сами его отдадите, или есть возможность получить все символы объекта), но уникальность символа дает достаточную приватность. Я лично предпочитаю именно этот вариант
4. объект в WeakMap с текущим this в качестве ключа - es2015+, полная приватность, но достаточно громоздко, суть в том, что в конструкторе мы создаем новый объект для хранения приватных свойств и сохраняем его в WeakMap с ключом this, а там где нужно извлекаем по this

Это меняется в цветовой схеме. Для упрощения изменения можно установить плагин: ColorSchemeEditor.
После установки: Ctrl+Shift+P -> Color Scheme Editor: Edit current color scheme, откроется второе окно. И при клике на первом окне на элемент, который нужно изменить, на втором окне курсор будет перемещаться в место, откуда берется цвет и стиль, а также внизу в статус баре отображается строка, как можно задать это значение в цветовой схеме, если еще не задано для более детального изменения темы, к примеру:
string.quoted.single.js.