Есть 2 шаблона:
default.vue
<template>
<div>
<div>Default Layout</div>
<hr>
<Navbar></Navbar>
<Nuxt/>
</div>
</template>
<script>
import Navbar from "@/components/Navbar";
export default {
components: {
Navbar
}
};
</script>
shopLayout.vue
<template>
<div>
<div>Shop Layout</div>
<hr>
<Navbar></Navbar>
<Nuxt/>
<buy-best-item></buy-best-item>
</div>
</template>
<script>
import Navbar from "@/components/Navbar";
import BuyBestItem from "@/components/BuyBestItem";
export default {
components: {
Navbar,
BuyBestItem
}
};
</script>
В shopLayout импортирован компонент BuyBestItem, который завязан на текущем роуте.
BuyBestItem.vue
<template>
<div class="buy-card">
<h2>Best item "{{bestItem.name}}"</h2>
<img :src="bestItem.src">
<div>$ {{bestItem.price}}</div>
<button>Buy</button>
</div>
</template>
<script>
export default {
computed: {
bestItem() {
return this.$store.state.shop[this.$route.params.item_name];
}
}
};
</script>
Если перейти по ссылкам:
Главная страница (default layout) или
Страница товара (shopLayout), то все ренедерится нормально без ошибок.
Но если со страницы товара перейти по ссылке Home, то всё падает.
Я считал что при смене роута сначала берётся нужный layout, а потом происходит все вычисления и рендеринг. Но получается, что роут изменился, компонент ищет в хранилище значение, которого нет и всё падает при рендере страницы, т.е. до фактической смены layout`а.
Как можно это исправить не меняя зависимость компонента от роута?
Песочница 
