how to pass data from one route component to another route component

I'm trying to pass data from one route component - UserList.vue to another route component - CreateUser.vue in vue.js but getting undefined when I try to access passed data inside destination component.

routes :

{
    path: '/',
    name: 'main',
    component: InitialView,
    children: [{
      path: '/',
      alias: '/login',
      name: 'login',
      component: () => import('../components/LogIn.vue')
    }]
  },
  {
    path: '/u',
    name: 'u',
    component: () => import('../views/MainView.vue'),
    children: [{
      path: 'users',
      alias: 'users',
      name: 'users',
      component: () => import('../views/UsersView.vue'),
      children: [{
        path: 'create-user',
        name: 'create_user',
        component: () => import('../components/CreateUser.vue')
      }, {
        path: 'list',
        alias: '',
        name: 'users_list',
        component: () => import('../components/UserList.vue')
      }, {
        path: 'edit',
        name: 'edit_user',
        component: () => import('../components/CreateUser.vue'),
        props: true,
      }]
    },

UserList.vue :

 <router-link :to="{
    name: 'edit_user', 
    params: {
       'userId': 'some',   
       'data' : "newUser"                                 
    }
 }">

CreateUser.vue :

props: ['userId', 'data'],

I'm trying to access userId and data in CreateUser.vue as this.userId and this.data

I have already referred many similar questions but nothing seems to work