I can't figure out why is this message showing. It appears only when I click on a button and I'm redirected by router.push to the page.
[Vue warn]: Error in directive intersect unbind hook: "TypeError: Cannot read property 'observer' of undefined"
As I'm not sure where the problem is so I'll show you the router and also the structure:
Btw. Streamers is a different page, not this one (check routes below).
Can you help me?
STRUCTURE
App.Vue -> Dashboard.Vue -> StreamerDetail.Vue
App.Vue
<template>
<v-app id="inspire">
<router-view></router-view>
</v-app>
</template>
<script>
export default {
data: () => ({}),
mounted() {
this.$store.dispatch('loadInitial')
}
}
</script>
Dashboard.Vue
<template>
<div>
<v-app-bar app absolute>
</v-app-bar>
<v-navigation-drawer bottom color="primary" dark app>
<v-list nav>
<v-list-item @click="$router.push({name:'Home'}).catch(err => {})">
Home
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-content>
<router-view></router-view>
<v-snackbar
:timeout="3000"
:value="!!$store.state.snackbar.message"
:multi-line="true"
:color="$store.state.snackbar.color"
@input="$store.commit('resetSnackbar')">
{{ $store.state.snackbar.message }}
</v-snackbar>
</v-content>
</div>
</template>
StreamerDetail.Vue
<template>
<v-row v-if="streamer" class="my-12">
// even if I delete everything inside this row, the error is still present
</v-row>
</template>
ROUTER
const routes = [
{
path: '/',
name: 'Home',
component: Dashboard,
redirect: '/streamers',
children:[
{
path: 'streamers/',
name: 'Streamers',
component:Streamers,
},
{
path: 'streamers/:id/detail/',
name: 'StreamerDetail',
component:StreamerDetail,
},
],
},
{
path: '/login',
name: 'Login',
component: Login,
}
]
