Vue Lifecycle Hooks - only destroy data when Parent route changes - vue.js

Question

I have an app that uses vue router where the parent User route has the children Details, Pay, and Assignments. I would like to load all of the data from vuex when the parent User page loads and keep it alive until the parent is destroyed.
However, if I add this to the User (parent) layout, data is destroyed when switching between children.
In user.vue
<router-view :user="user" />
and
destroyed() {
this.$store.dispatch('clearUserState')
console.log('destroyed')
}
In router
{
path: '/users',
name: 'users',
component: () => import('../views/Users/Users.vue'),
meta: {
requiresAuth: true
},
},
{
path: '/users/:id', redirect: '/users/:id/details',
name: 'userHome',
component: () => import('../views/Users/User.vue'),
meta: {
requiresAuth: true
},
children: [
{
path: '/users/:id/details',
name: 'userDetails',
component: () => import('../views/Users/UserDetails.vue'),
props: true,
meta: {
requiresAuth: true
},
},
{
path: '/users/:id/assignments',
name: 'userAssignments',
component: () => import('../views/Users/UserAssignments.vue'),
props: true,
meta: {
requiresAuth: true
},
},
{
path: '/users/:id/payroll',
name: 'userPayroll',
component: () => import('../views/Users/UserPayroll.vue'),
props: true,
meta: {
requiresAuth: true
},
},
]
},
If the lifecycle hook on the parent isn't the correct place to clear my user data, should it be with some sort of navigation guard? or a watcher?
Thanks!