0xD34F

с минимальным количеством действий

Ну, как скажете.

Замените v-for="el in link" на v-for="el in [].concat(link)".

Можно сбросить в 0 продолжительность выполнения анимации: transition-duration: 0ms;.
Или вообще убрать её: transition: none;.

Как это будет выглядеть на практике: определяете в стилях класс, который убирает анимацию, в компоненте определяете свойство, в зависимости от значения которого класс будет назначаться элементу. Надо, чтобы анимация воспроизводилась - устанавливаете свойству значение true, не нужна анимация - false. Как-то так.

Чтобы получить экземпляр корневого компонента, вам нужен результат выполнения mount, а не createApp. Документацию могли бы и открыть, даже читать не обязательно - просматривая наискосок, можно наткнуться на примеры, из которых всё понятно.

Инкапсуляция стилей реализуется путём добавления уникального (в пределах компонента) атрибута элементам и, соответственно, селекторам в css-коде. Вы создаёте элементы вручную, так что нужный атрибут у них отсутствует - поэтому стили не применяются. Чтобы применились, можно воспользоваться т.н. глубоким селектором - для этого замените .frame { на .slider /deep/ .frame {.

По одному работает, если отметить оба, то "Error in v-on handler: "TypeError: Cannot convert undefined or null to object"

Что возвращает validations, если оба значения true? Ничего. Пусть всегда будет объект:

validations() {
  return {
    life: this.property ? {} : { required: v => v },
    property: this.life ? {} : { required: v => v },
  };
},

<div>STATUS: {{ $v.$invalid ? 'ЖОПА' : 'OK' }}</div>

$addres.val("Мои данные").change();

Во-первых - события jquery и нативные не являются взаимозаменяемыми. Само собой, про первые Vue не в курсе.

Во-вторых - по умолчанию Vue слушает событие input (change - это если v-model используется с модификатором lazy).

Так что попробуйте заменить .change() на [0].dispatchEvent(new Event('input')).

Пусть в сторе кроме собственно массива данных также хранятся текущая страница и общее количество страниц; действие fetchCharacters - пусть загружает не дефолтную первую страницу, а какую будет указано:

state: {
  characters: [],
  page: 0,
  pages: 0,
},
mutations: {
  setCharacters: (state, { characters, pages, page }) =>
    Object.assign(state, { characters, pages, page }),
},
actions: {
  async fetchCharacters({ commit }, page = 1) {
    try {
      const { data: { info, results } } = await axios.get(`${BASE_URL}?page=${page}`);
      commit('setCharacters', {
        page,
        pages: info.pages,
        characters: results,
      });
    } catch (e) {
      console.error(e);
    }
  },
},

В компоненте, где используется пагинация, делаем вычисляемое свойство, которое будет отвечать за текущую страницу - геттер достаёт значение из стора, сеттер вызывает действие fetchCharacters:

computed: {
  currentPage: {
    get() {
      return this.$store.state.page;
    },
    set(page) {
      this.$store.dispatch('fetchCharacters', page);
    },
  },
},

Привязываем это вычисляемое свойство к экземпляру компонента пагинации:

<el-pagination
  v-model:current-page="currentPage"
  :page-count="$store.state.pages"
  layout="prev, pager, next"
  background
/>

https://jsfiddle.net/qbjc9onm/

При указании to элемент списка начинает работать как ссылка - внутри v-list-item будет создаваться router-link, который в вашем случае создать невозможно, по причине отсутствия роутера. Ну и всё, дальше выяснять, что конкретно и почему не работает - не интересно.

Определитесь, как вы хотите управлять активностью элементов списка. Если действительно с помощью роутера - ну так добавьте его, определите маршруты, уберите v-model. Если через v-model - не надо пытаться указывать to.

data: () => ({
  sortOptions: [
    { value: 'PriceMinMax', text: 'сначала дешевле' },
    { value: 'PriceMaxMin', text: 'сначала дороже' },
  ],
  ...
}),

<ul>
  <li
    v-for="n in sortOptions"
    v-text="n.text"
    :class="{ active: sortBy === n.value }"
    @click="sortBy = n.value"
  ></li>
</ul>

li.active {
  color: red;
}

data() {
  return {
    dates: [ массив допустимых дат, в числовом виде (количество миллисекунд) ],
    disabledFn: {
      customPredictor: date => !this.dates.includes(new Date(date).setHours(0, 0, 0, 0)),
    },
  };
},

<datepicker :disabledDates="disabledFn" />

https://codesandbox.io/s/for-httpsqnahabrcomq97203...

суть вопроса, можно ли обойтись без computed свойства, для получения длины получаемого массива в watch?

Можно. Длину и отслеживайте:

watch: {
  'notifications.length'(newValue, oldValue) {
    ...

присваивание всем переменным, которые используются в компоненте, их дефолтное значение мне тоже кажется не лучшей идеей

Кроме "кажется" другие возражения против данного способа есть?

Если не устраивает объём кода - вынесите его в отдельный метод, который будет вызываться при создании экземпляра компонента и когда значения надо сбросить.

Очевидно же раз - понизить используемую версию chart.js. Так, чтобы первой цифрой была 2, а не 3.

Очевидно же два - подождать, пока выйдет версия vue-chartjs с поддержкой третьего chart.js.

Очевидно же три - форкнуть vue-chartjs и реализовать поддержку третьего chart.js самостоятельно.

через render-функцию

UPD. Вынесено из комментариев:

код же можно изменить под vue 3, да?

да

Где вызов экшена GET_CHARACTERS? Не вижу. Надо добавить.

let data = await axios.get(baseURL);
context.commit('SET_CHARACTERS', data)

Здесь вы передаёте в мутацию объект ответа целиком - не только данные, но ещё и статус, заголовки и т.д. Кроме того, судя по дефолтному значению characters, вы желаете получить массив, а возвращается объект, содержащий массив в качестве значения свойства results. Так что пусть будет

const response = await axios.get(baseURL);
context.commit('SET_CHARACTERS', response.data.results);

<div>{{ $store.state.characters }}</div>

Раз выводите массив - выводите его поэлементно:

<div v-for="n in $store.state.characters">
  {{ n.name }}
</div>

UPD. https://jsfiddle.net/o3wszLdv/

filters: {

vue@next

Интересно, что по этому поводу говорит документация? А вот что:

In 3.x, filters are removed and no longer supported. Instead, we recommend replacing them with method calls or computed properties.

Разберитесь с приоритетом операторов.

Давайте-ка скобок добавлю, чтобы яснее стало, что в каком порядке выполняется:

('ic' + true) ? 'on' : ('off' + '.svg')

Ну и конечно писать подобные выражения в шаблоне - совсем не круто. Вынесите его в вычисляемое свойство или метод, например:

computed: {
  className() {
    return условие ? 'icon.svg' : 'icoff.svg';
  },
  ...

<p :class="className">

computed: {
  stationsWithCars() {
    return this.cars.reduce(
      (acc, n) => (acc[n.address]?.cars.push(n), acc),
      Object.fromEntries(this.stations.map(n => [ n.name, { station: n, cars: [] } ]))
    );
  },
},

<div v-for="{ station, cars } in stationsWithCars" :key="station.id">
  <h1>{{ station.name }}</h1>
  <ul>
    <li v-for="car in cars" :key="car.id">{{ car.name }}</li>
  </ul>
</div>

methods: {
  short: str => str.replace(/(?<=^.{3}).{4,}(?=.{8}$)/, '...'),
  ...

<span>{{ file ? short(file.name) : 'Прикрепить' }}</span>