0xD34F

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

@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

$('p i').text((i, text) => i % 3 ? text : 'hello, world!!');

или

document.querySelectorAll('p i').forEach((n, i) => {
  n.textContent = i % 3 ? n.textContent : 'fuck the world';
});

Если у элементов p общий родитель, то можно и не смотреть на индекс, сразу нужные элементы получить:

for (const n of document.querySelectorAll('p:nth-of-type(3n + 1) i')) {
  n.innerText = 'fuck everything';
}

if (inputs[el].value == "") el++;

if (inputs[el].value.match(/[А-я]/)) {

Давайте представим, что пустое значение имеет последний элемент. Делаете свой ++, а затем пытаетесь элемент обработать - следующий, которого НЕТ. А раз его нет, значит он undefined, а у undefined никакого value быть не может, как и любых других свойств. Если не хотите обрабатывать пустой элемент - выполняйте переход к следующей итерации цикла вместо вот этих вот стрёмных манипуляций со счётчиком.

.product_card:hover .hover_block {
  position: relative;
  z-index: 666;
}

Забыли return. Или фигурные скобки лишние. В articles.map.

export default props => (
  <ul>
    {props.articles.map(n => (
      <li key={n.id}><Article article={n} /></li>
    ))}
  </ul>
);

Надо предварительно компилировать, или хранить не строку, а объект: имя компонента + параметры. Например.