How to run a method on page load?

Question

Vue.js

When the project is initialized, information about the authorized user is requested.
At this time, in the component, you need to download the news for the user, but for this you first need to get his id.
Theoretically, the request for user information may hang and at the time the component is loaded, the user id information may still be missing.
So this approach won't work:

//component
...
created() {
    this.$axios.post('/news', {user_id: this.$store.state.user.id})
}

Then you can run this method in watch:

//component
...
watch: {
    '$store.state.user': function() {
            this.$axios.post('/news', {user_id: this.$store.state.user.id})
    }
}

But this method will not work if the information has already loaded at the time the component is loaded.
Then the third option:

//component
...
watch: {
    '$store.state.user': function() {
           this.loadNews();
    }
},
created() {
    this.loadNews();
},
methods: {
    loadNews() {
        this.$axios.post('/news', {user_id: this.$store.state.user.id});
    }
}

But this code looks redundant.
How to do it right?

Answer 1

beforeCreate

Answer 2

//component
...
watch: {
    '$store.state.user': {
         handler() {
             this.loadNews();
         },
         immediate: true
     }
},
methods: {
    loadNews() {
        this.$axios.post('/news', {user_id: this.$store.state.user.id});
    }
}

Answer 3

So this approach won't work:

//component
...
created() {
    this.$axios.post('/news', {user_id: this.$store.state.user.id})
}

Why won't it work?