Evgeny Kulakov

Из документации: https://router.vuejs.org/ru/advanced/navigation-gu...

Следует помнить, что изменение параметров маршрута не вызывает выполнения сторожевых хуков enter/leave. Вы можете добавить watch на объект $route для отслеживания этих изменений, или использовать хук beforeRouteUpdate.

Велосипед: https://codepen.io/kerf/pen/VWQwXV

Вот эта запись странная:

commit(types.SAVE_USER_DATA), {
        user: user

    }

должно быть что-то типа:
commit(types.SAVE_USER_DATA, {user: user})

let time = new Date().getTime() // 1498555006770
let date = new Date(time)
console.log(time)
console.log(date.toString(date))

var arr = [{x : 'x', y : 'y'}, {x : 'x'}, {x : 'x', y : 'y', z : 'z'}];
arr = arr.sort((a, b) => Object.keys(a).length - Object.keys(b).length)
console.log(arr)

var obj = {"10002":{"color":"black"},"10003":{"color":"white"}}
var res =  Object.keys(obj).filter(item => obj[item].color === 'black')
console.log(res)

Кажется это не совсем верный подход пытаться изменять $route.name.
В CategoriesPage скорее всего вы получаете список с категориями, сохраняйте этот список в стор, т.е. у вас должен быть объект типа:

categories: 
  [{id: 1, name: 'Категория 1'},
   {id: 2, name: 'Категория 2'},
   {id: 3, name: 'Категория 3'}]

Далее при нажатии на ссылку с определенной категорией передавайте в компонент CategoryPage id категории и в этом компоненте по id получайте из стора название категории и отображайте его. Аналогично в CategoryPage вы должны забирать с бэкэнда список товаров и отображать его, при нажатии на определенный товар передаете id этого товара в компонент, который будет отвечать за его отображение и в нем по этому id получаете название товара.

Попробуйте вот так переписать(возможны ошибки в синтаксисе):

getCategories (cb) {
        setTimeout(() => {
            Vue.http.get('category')
            .then(response => response.json())
            .then(data => {
                if (data) {
                    console.log(data);
                    cb(data)
                }
            }
       }), 100) 
    },

Замените на: new RegExp("&&-img_1-&&", "g");

А если div вместо span?
<div v-if="processing">scaleX</div>

Если используется система модульной сборки, то можно так:

<template>
  <component :is="comp" v-bind=propsData>
</template>

<script>
import comp from '@/path/comp.vue';

export default {
  props: ['propsData'],
  data() {
    return {
      comp
    }
  }
}
</script>

Костыль) https://codepen.io/kerf/pen/GERQYM

Вы используете стрелочную функцию, она берет this из лексического окружения. Нужно вот так:

increment: function(num) {
            console.log(num, this);
            this.counter += num;
          }

Вот такой вариант, наверное он не оптимальный, но вроде решает задачу разделения данных: https://codepen.io/kerf/pen/gWzZVB .
Смысл в том, что когда нужно отображать какой-то шаблон для ячейки, то создаем отдельный компонент. В родителе описываем объект свойств, которые нужно передать и вешаем обработчик.