origami1024

Скорее всего TodoList.vue написано с использованием русской раскладки либо в названии файла, либо в коде ссылка

А один список без флексов и без js со свойствами column-fill: balance-all; и column-count: 3; не пойдет?

<a :class="{active: item == currentlyActiveItem}">{{item}}</a>

active - это название класса
item - это то что у тебя уже используется в цикле
currentlyActiveItem - переменная из data, хранящая текущий актив итем

https://ru.vuejs.org/v2/guide/class-and-style.html - вот почитать
https://codepen.io/Bondar/pen/OzWYNd - вот еще примерчиг

Onclick ловится внутри компонента походу.
Добавить .native, чтоб перехватить
https://jsfiddle.net/e9c5fm0d/

Самый простой вариант - inline-style

<div id="test" :style="{ color: activeColor }"></div>

activeColor - из props или из data

То есть получать ничего не надо, нужно только задавать.
Часть CSS, которая будет как-то изменятся должна строится на основе данных изначально. А потом эти CSS св-ва ты получаешь не на прямую из css, а из данных, на основании которых св-ва CSS обновляются

Вот официальная схема. Родители детям через props, назад через events.


1) Пример объявления child в template родителя

<child :somedata="data1" @bestEventEver="someMethod"/>

-передаешь данные из переменной родителя data1 чилду в пропс somedata.
-вешаешь метод родителя someMethod для обработки кастомного ивента 'bestEventEver', приходящего из чилда

2) В child вызываешь this.$emit('bestEventEver', 'params pam pams')

Есть сокращения этого для простых случаев через :v-model и .sync, читай официальный гайд

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

Если нужно общение не уровня родитель-ребенок, а все со всеми, вот варианты

Ты нигде не вызываешь getMonthRate и getCoefficient, (кроме как при показе в этих параграфах) которые считают промежуточные данные. Вызывай эти computed при изменениях в инпутах.

Вот так работает, хотя код немного костыльный получился

Три варианта:
1. Посылать ивент в батю, батя пошлет деду, так до общего предка, общий предок спустит пропс своим наследникам.
2. Использовать Vuex, изменять там состояние, чтобы другой элемент просто обновлялся при изменении затрагивающих его состояний
3. Общаться напрямую через рут
Компонент1:
this.$root.$emit('eventing', data);
Компонент2:

mounted() {
  this.$root.$on('eventing', data => {
    console.log(data);
  });
}

По официальной ссылке там дальше есть простой пример как раз с форматированием даты.
vuetifyjs.com/en/components/date-pickers

Date pickers - formatting date
If you need to display date in the custom format (different than YYYY-MM-DD) you need to use the formatting function.

Вот тебе Vuetify компонент (созданный с учетом всех спецификаций material design гугла)
https://vuetifyjs.com/ru/components/selects#examples

UPD: более универсальный select

Вот вариант сокращения

<button class="modal-heading__button modal-heading__button-login"  v-if="view==='log'" @click="view='reg'">login</button>
<button class="modal-heading__button modal-heading__button-register"  v-else-if="view==='reg'" @click="view='3rd'">register</button>
<button class="modal-heading__button modal-heading__button-thirdOption"  v-else-if="view==='3rd'" @click="view='log'">the wae of the deval</button>

...
data(){
    return {
        view: 'log'
    }
}
...

вот песочница, если чо
https://codepen.io/origami1024/pen/bGbyWaO

UPD: еще сокращения