Why can't I pass data to a Vue component?

Question

JavaScript

The situation is this: a dynamic page that has a Channel component
First, a request for a page must occur, and only then for a Channel
. A parameter is passed to the request for a Channel, which receives from the page data.

The problem is that the Channel makes a request, but does not receive this parameter, but it only gets it when I make some change in the code, and I don’t even understand the essence of the problem - WHY is channel LOADING BEFORE THE PAGE?

Or how to make the CHANNEL render happen when the page is completely ready, and all its data has already been stored
(I use VUEX)

Or some other option, because I don’t understand at all what the problem is

export default {
  components: {
    channel,
  },
  props: ["page_id"],
  computed: {
    ...mapState({}),
    ...mapGetters([
      "PAGE_TITLE",
      "PAGE_META",
    ]),
  },
  methods: {
    ...mapMutations([]),
    ...mapActions([
      "FETCH_PAGE",
      "FETCH_CHANNEL",
    ]),

    rebootFETCH_PAGE() {
      this.FETCH_PAGE(this.page_id);
  },
  },
  created() {
    this.FETCH_PAGE(this.page_id);
  },
  mounted() {
    this.FETCH_CHANNEL(this.PAGE_META.Channel)
  },
  watch: {
    $route: "rebootFETCH_PAGE",
  },
};

Answer 1

There is such an option:
Make the channel prop the default value, and check it with a watcher. If the value has changed, then only make a request.
Or you can create a field ready by default = false, and show the component only when ready === true.
And it will change to true after the request: If the request is made by axios, then in then.

Answer 2

In such cases, I do it simply - a variable where we get the data for the default component null and wrap the component in a div with v-if="abc!==null". All. As soon as the data was loaded from the server, the component was rendered

Answer 3

The page is the same component as any other, and as far as I remember, the components are assembled from child to parent.
In your case, it seems to me, it's worth just embedding the data flow correctly using reactivity - i.e. the representation of the component should reactively depend on the parameters (either directly on the parameter, or through a computable field (computed), or through observation (watcher). And then it will not be so important at what point the input data comes in - as it comes, the component will redraw itself
. Unfortunately, I can’t advise something more specific without the layout and code of the page and the channel component.