Negwereth

ну промисы же, а теперь ещё и async/await, ну

Классической инкапсуляции в JS нет и, надеюсь, не будет.

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

Лично мне такой способ очень понравился.

Может, потому, что это не событие, а прямой вызов метода?

Точка не может быть частью имени класса

Мое недопонимание заключается в том, стоит ли разбираться в jquery не зная javascript

НЕ СТОИТ!

Потому как увидите, что в 90% случаев использование jQuery просто не нужно.

codewars тот же
туториалы фреймворков для общего понимания,

Поставь свой span после инпута и используй Силу:

input[value=""] + span {
    display: none;
}

1. У вас this будет или undefined или window (зависит от строгости режима), но уж никак не vue экземпляр.
2. Мутировать коллекции во vue лучше операциями с исходным массивом, а не заменой свойства полностью.

function callNamedMethod(name) {
  object[name]();
}

main("hide");
main("show");

var keys = ['key1', 'key2', 'key3'];
var values = ['val1', 'val2', 'val3'];

let object = keys.reduce((object, key, index) => Object.assign(object, {[key]: values[index]}), {});

Ну так сходите на собеседование и узнайте, чего на мидла спрашивают