I'm puzzled by the appearance of this message. It only shows up when I click on a button and get redirected to the page using router.push.
[Vue warn]: Error in directive intersect unbind hook: "TypeError: Cannot read property 'observer' of undefined"https://i.sstatic.net/RfImc.png
Since I'm unsure about the source of the problem, I'll provide you with details of the router and the structure:
By the way, Streamers refers to a different page, not the current one (check routes below).
Can you assist 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,
}
]