0xD34F

Первым делом надо выдернуть из объекта 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. Вот вам ваш код, приведённый в относительно рабочее состояние, думайте.

В обработчик клика передаётся объект события, а не элемент. А ещё значения data-country почему-то на русском - какого чёрта? Надо, чтобы были такими же, как и id у элементов .tabcontent.

Править атрибуты я конечно не буду, а код вот:

const tabLinks = document.querySelectorAll('.tablinks');
const tabContent = document.querySelectorAll('.tabcontent');

tabLinks.forEach(n => n.addEventListener('click', openTab));

function openTab({ currentTarget: t }) {
  const { country } = t.dataset;
  tabLinks.forEach(n => n.classList.toggle('active', n === t));
  tabContent.forEach(n => n.classList.toggle('active', n.id === country));

  // или, к чёрту data-атрибуты и id, можно индексами воспользоваться;
  // конечно, в этом случае необходимо, чтобы .tablinks и соответствующие им
  // .tabcontent были расположены в одинаковом порядке
  const index = Array.prototype.indexOf.call(tabLinks, t);
  tabLinks.forEach(n => n.classList.toggle('active', n === t));
  tabContent.forEach((n, i) => n.classList.toggle('active', i === index));
}

Просто добавьте метке обработчик клика:

placemark.events.add('click', () => {
  // здесь дёргаете scrollTo или scrollIntoView
});

https://jsfiddle.net/9xskoczg/

pointer-events: none для ::after

<button v-for="(n, i) in items" @click="onClick(i)">{{ n }}</button>

methods: {
  onClick(index) {
    this.items = this.items.slice(0, index + 1);
    // или
    // this.items.splice(index + 1, this.items.length - index);
  },
  ...
},

https://jsfiddle.net/z3xh2ts4/

Создаёте infowindow:

const info = new google.maps.InfoWindow();

И показываете его при клике на маркеры:

marker.addListener('click', function() {
  info.setContent('сюда засовываете свою информацию');
  info.open(map, marker);
});

https://codepen.io/anon/pen/MdjRrM?editors=1010