0xD34F

Числа как строки сравниваете. Так что да, '2' > '10', всё правильно.

Что делать? Ну, очевидно - сравнивайте числа как числа. Придётся усложнить метод сортировки, чтобы он умел понимать, с каким типом данных работает. Или, если лень переделывать, можно по-быстрому закостылить: числа сразу превращать в строки, результат сравнения которых будет таким же, как у чисел - дополните их нулями спереди.

UPD. Массив items, передаваемый в мутацию saveSort, содержит те же объекты, что и массив itemsList из стейта, так что никакого find здесь не надо:

mutations: {
  saveSort: (state, items) => items.forEach((n, i) => n.sort = i),
},

А чего непонятно-то? Функция принимает элемент items, должна вернуть значение.

Сама функция может быть методом компонента:

:item-value="itemValue"

methods: {
  itemValue() {
    ...

UPD. Всё ещё непонятно? Ну вот вам небольшой примерчик (сделан на основе первой же демки из документации).

А какая разница, pug у вас или не pug? Всё как обычно:

p test: {{ isNewDesign }}

mounted не подходит так как, он вызывается при каждом переходе

Если использовать keep-alive, mounted (так же, кстати, как и created - инициировать загрузку данных лучше в нём) будет вызван один раз.

Или можете использовать vuex для хранения данных, и при создании экземпляра компонента проверять их наличие.

В v-model должен быть массив, а не состояние конкретного чекбокса; кроме того, чекбоксам следует указать значения. Есть же пример в документации. Соответственно, ваш код можно (но не факт, что нужно) переписать как-то так, например.

getOneProfile: state => {
  return state.profile
}

{{ getOneProfile.profile.name }}

То есть, у state.profile есть свойство profile? Типа, можно было бы и $store.state.profile.profile.name написать? Подозреваю, что profile всё-таки лишний. Ну и чтобы не пытаться выводить данные, которых пока нет, используйте условный рендеринг:

<КакойТоКомпонент v-if="данные">

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

Я думал, нужно делать какой то лоадер, пока данные идут?

Ну сделайте:

<КакойТоКомпонент v-if="данные" />
<ИндикаторЗагрузки v-else />

vue.js переопределит экземпляр класса User в обычный объект

ДА НЕУЖЕЛИ??!

computed: {
  catId() {
    return this.$route.meta.catId;
  },
},

Ну или без лишней мишуры:

<ListProducts :catId="$route.meta.catId" />

Обработчик blur скрывает список до того, как происходит событие click. Соответственно, клик приходится вовсе не по элементу списка. Вместо click обрабатывайте mousedown, это вот здесь:

@click="checkOption(option);"

Да потому что

v-model is required

Соответственно, добавьте вашему input'у

domProps: {
  value: this.value,
},

Удаляется где надо, проблема в том, что вы разделили данные со значениями селектов и их id. Одно удаляете, а другое остаётся. Храните значение в том же объекте, что и id. Т.е., вырезаете selectField, а v-model="selectField[index]" заменяете на v-model="item.value", например, а selectField.includes(name) на conditionList.some(n => n.value === name).

Точно так же, как и без vue - смотрите на event.target, действуете по обстоятельствам:

https://jsfiddle.net/rdcem751/

Непонятно, действительно ли вам надо модифицировать исходные данные. Если да, тогда делайте watch на checkedRows, где будете проверять наличие свойства в выбранных объектах и добавлять его в случае отсутствия. Если нет - делаете computed свойство, основанное на checkedRows, где будет создаваться массив с копиями выбранных объектов, дополненными нужными свойствами.

Вопрос - правильный ли такой подход?

Ну раз вы намерены использовать vue - в корне неверный. Говоря "объект", вы имеете в виду элемент DOM-дерева, тогда как vue предполагает первичность данных. Например - вроде бы сделано ровно по вашему описанию, но обратите внимание, что в основе данные, а не разметка - элементы создаются на основе массивов, элементы не модифицируются непосредственно, вместо этого изменяется содержимое массива.

Во-первых - замените имя свойства class, ключевые слова использовать нельзя (на самом деле можно, но как - я вам говорить не стану, сперва научитесь давать свойствам нормальные имена). Пусть будет className, например.

Во-вторых, :class="className". Ну и документацию почитайте.

Приноровился к angular 2+

Если это правда, то чтения официальной документации вам будет более чем достаточно. Понимание начнёт приходить вот прям сразу.

<router-view v-if="условие" />
<Component v-else />

https://jsfiddle.net/5qt9zw0g/

Во-первых, событие должно быть input, а не change. Во-вторых, нативные события, и события, которые генерирует jquery (на них vue, очевидно, плевать) - это не одно и то же. Так что

$('#dateStart').trigger('change');

следует заменить на что-то вроде

this.dispatchEvent(new Event('input'));

UPD. Пара примеров того, как это может выглядеть:

раз - с использованием jquery-ui datepicker
два - с использованием air-datepicker.

:curPage="defineCurPage"

Нет, так это работать не будет. В DOM-шаблоне. Из-за нечувствительности к регистру. Замените на :cur-page="defineCurPage".