0xD34F

Ну, во-первых - переменные всё-таки обновляются. Во-вторых - проблема тут не столько в использовании nextTick, сколько в том, как браузер оптимизирует отрисовку страницы. Если одно и то же css свойство обновляется несколько раз подряд, то отрисовано будет только последнее состояние. Чтобы добиться желаемого поведения, вам надо спровоцировать reflow между изменениями свойства - тут есть разные варианты. Например.

Вместо ненужных элементов ничего не указывайте:

function someFunction([ ,,, id,, status ]) {

Или, можно деструктурировать массив как обычный объект:

function someFunction({ 3: id, 5: status }) {

web worker

Чем является this внутри обработчика клика? Не тем, что вам кажется. Замените $(this).attr("href") на $(event.target).attr("href") или стрелочную функцию на обычную.

Первым делом надо выдернуть из объекта msg.razd массив значений:

const arr = Object.values(msg.razd);.

Затем из вложенных массивов следует собрать один общий:

const categories = arr.flatMap(n => n.category);

// или

const categories = [].concat.apply([], arr.map(n => n.category));

// или

const categories = arr.reduce((acc, n) => (acc.push(...n.category), acc), []);

И, наконец, достать из полученного массива объекты с указанными id:

const result = categories.filter(n => expect.includes(n._id));

// или

const result = categories.filter(function(n) {
  return this.has(n._id);
}, new Set(expect));

// или

const categoriesObj = Object.fromEntries(categories.map(n => [ n._id, n ]));
const result = expect.reduce((acc, n) => ((n = categoriesObj[n]) && acc.push(n), acc), []);

$(document).on('click', '.qwe > a', function() {
  $(this).next('.op').addClass('actives');
});

$(document).on('click', '.cl', function() {
  $(this).closest('.op').removeClass('actives');
});

Или может есть вариант на CSS?

есть

Отсутствует key. Вы его вроде бы указали, но ведь реально никаких id в элементах массива items нет. Надо добавить.

Забыли передать current в setTimeout, должно быть так:

setTimeout((current) => pika[current].classList.toggle('active'), 100, current)

UPD. А вообще, не очень понятно, зачем этот setTimeout нужен. Можно просто вырезать его.

А зачем вы добавляете обработчики keydown в startGame? Десять раз сыграли - вот уже есть десять обработчиков, которые делают одно и то же. Достаточно и одного. Вынесите этот код за пределы startGame.

Добавьте в компонент свойство, которое будет ссылкой на кликнутое пользователем сообщение, и при открытии окна обновляйте его:

@click="openModal(message)"

data: () => ({
  openedMessage: {},
  ...
}),
methods: {
  openModal(message) {
    this.openedMessage = message;
    this.showMessageModal = true;
  },
  ...
},

Ну а в модальном окне, соответственно, выводите нужные значения:

<span class="box-title">{{ openedMessage.какоеТамУВасСвойствоОтвечаетЗаЭтотTitle }}</span>
...
<div class="box-body">{{ openedMessage.нуТутТожеВамВиднееЧтоНаписать }}</div>

Добавляете в стейт свойство, указывающее сколько элементов надо показать. Также вешаете обработчик события скролла, в котором проверяете scrollTop - если дальше скроллить некуда, увеличиваете количество отображаемых элементов. Например.

{this.props.children}

Документацию всё-таки следует читать:

Vue cannot detect the following changes to an array <...> When you directly set an item with the index

Соответственно, вместо

this.terain[x][y] = Number(this.cursorBlock)

пусть будет

this.$set(this.terain[x], y, +this.cursorBlock);

// или

this.terain[x].splice(y, 1, this.cursorBlock | 0);

Изменять данные в вычисляемых свойствах не следует, но вы это делаете - поскольку метод reverse не создаёт новый массив, а меняет исходный. Так что прежде чем его использовать, массив следует скопировать:

return [...this.messagesforuser].reverse()

Элемент скопировали, а привязанные к нему обработчики событий - нет.

Сделайте обработчик клика делегированным, вместо клонируемого элемента назначьте его контейнеру, в котором элемент содержится:

const $test = $('.test').on('click', '.testText', function() {
  $test.append($(this).clone());
});

Или клонируйте элемент вместе с его обработчиками событий:

$('.testText').click(function() {
  $('.test').append($(this).clone(true));
});

const index = items.findIndex(n => n._id === 3);
const result = items.slice(index * (index !== -1));

или

const result = items.reduce((acc, n) => (
  n._id === 3 && (acc = []),
  acc.push(n),
  acc
), []);

.bullet li.notForList:before {
  counter-increment: none;
  content: "";
}

this.$store.dispatch({type:'ADD_CONTACT'}, payload)

actions:{
    addContact:

Вы и вправду считаете, будто ADD_CONTACT и addContact - это одно и то же?

И уж если при вызове действия (мутаций это тоже касается) используете объектный синтаксис - payload должен передаваться не отдельным параметром, а как часть первого:

this.$store.dispatch({
  type: 'addContact',
  payload,
});

actions: {
  addContact: ({ commit }, { payload }) => commit('ADD_CONTACT', payload),
},

Ну и не очень понятно, зачем тут вообще нужно действие, никаких асинхронных операций не выполняете, можете сразу мутацию вызывать: this.$store.commit('ADD_CONTACT', payload).

Код компонента где хранятся все посты:

Неправда, посты вы храните не здесь, вы же vuex используете.

@click="addPostToHistoryComp(post.id, post.title, post.body)"

А если вы не через эту ссылку пост откроете? Добавление в историю должно выполняться из компонента поста. Да и не сработает этот обработчик клика - router-link событие клика не генерирует (можно подписаться на click.native).

paginatedData() {
  const start = this.page * 6;

Что такое page? - не вижу в компоненте свойства с таким именем. В результате у вас start и end оказываются NaN, а массив постов текущей страницы, соответственно, пустой.

addPostToHistoryComp(val){
  this.$store.dispatch('transforPostToHistoryComp', { 
    pTitle: val.post.title,

Что ещё за val.post? - вы же передаёте в метод отдельно id, title и body. Лучше передавайте объект поста целиком.

<li v-for="(historyPost, index) in historyPosts" class="post" :key="index">        
  <img src="src/assets/nature.jpg">
  <p class="boldText"> {{ post.title }}</p>

Так как всё-таки правильно будет - historyPost или просто post?

const todohistory = {
  title: payload.pTitle,
  body: payload.pBody,
  id: payload.pId
}
commit('ADD_TODO_HISTORY', todo)

Объявляете todohistory, а в мутацию передаёте какой-то непонятный todo. Это как?

ADD_TODO_HISTORY (state, todohistoryObject) {
  state.historyPosts.unshift(todoObject)
},

Тоже непонятно: todoObject - что это, кто это, зачем это, откуда он взялся?

UPD. Вот вам ваш код, приведённый в относительно рабочее состояние, думайте.