Set Data from beforeRouteEnter

Before I enter the route I pass the ID to my controller and do some checks to see if I can proceed onto the route. I also pass in some subscription data with it. On success I want to set the this.expense from the axios callback. Although when I try to set it and then do a console.log(this.expense) in the mounted or created method then it always shows up blank.

I've read the documents that I can set the apps details in the next() function but its not setting. Another way to solve this would be making another API call to call the data but I figured its useless making two calls if one can return me the data.

I am trying to set this.expense with the details returned from axios

   export default {
        data() {
            return {
                id: '',
                expense: [],
            }
        },
        beforeRouteEnter(to, from, next) {

            // called before the route that renders this component is confirmed.
            // does NOT have access to `this` component instance,
            // because it has not been created yet when this guard is called!

            let id = to.params.id

            if(!String(id).match(/^\d+$/) || String(id).length <= 0){
                window.location.href = '/404'
            }

            Vue.axios.get('/get-subscription/' + id).then((response) => {
                let data = response.data

                console.log( data)
                if (data.success) {

                    next((vm) => {
                        vm.expense = data.expense[0]
                    })


                } else {
                    window.location.href = '/404'
                }
            })

         },

        mounted() {
            console.log('Component mounted.')

            console.log('----')
            console.log(this.expense)
            console.log('----')
        },
        created() {
           this.id = this.$route.params.id
        },

    }

via Chebli Mohamed