Классической инкапсуляции в JS нет и, надеюсь, не будет.
Наиболее приятный в использовании вариант - Symbol, причём он и самый надёжный, так как исходный символ всегда спрятан в модуле и извне поле под таким ключом изменить нереально. С прочтением тоже огромные проблемы, так что тут в полный рост используются сеттеры и геттеры.
Нежизнеспособно. Абсолютно.
Вы привязываетесь к конкретному случаю разметки, к конкретным элементам и их количеству. Такие решения должны быть универсальными и работать вне зависимости от количества вкладок или их параметров.
В первую очередь посмотрите в сторону работы с массивами, коллекциями, как навешивать листенеры для большого количества элементов.
Привязывайтесь к определённым именам css-классов, а не к id.
Почитайте, что такое classList.
А после этого поищите чистое CSS-решение этой задачи. Оно есть.
1. У вас this будет или undefined или window (зависит от строгости режима), но уж никак не vue экземпляр.
2. Мутировать коллекции во vue лучше операциями с исходным массивом, а не заменой свойства полностью.
