How to synchronously draw a v-for inside a modal window?

Question

Vue.js

I am learning Laravel + VUE. It is not possible to synchronously display the cycle inside the modal window. There is a noticeable jump at opening. If you turn on slow mode, a small empty modal window appears first, then it expands when the v-for list is rendered.
How I do it:
Button to open a modal window (the button itself is in a v-for loop)

<button type="button" class="btn btn-primary btn-sm mt-2" @click="modalOpen(product.id)">Списки</button>

Runs a method that sets the variable to true

modalOpen(id) {
                  this.product_id = id,
                  this.active = true,
              }

The modal component is taken out of the loop and launched through v-if, focusing on the active variable

<modal-list v-if="active"
    :product_id="product_id"
    :active="active"
    >
    </modal-list>

Accordingly, the v-if th launches the ModalList component (a modal with a list).
In it, the modal accepts props

props: [
          'product_id',
          'active'
        ],

And shows itself through v-show. Focusing on the active props
<transition name="modal" v-show="this.active">
Along with the launch of the modal component, lists are fetched:

mounted() {
            this.fetchDataLists();
        }

method

fetchDataLists() {
            product_id=this.product_id
            axios.get(`/json/datalist/${product_id}`)
                .then(response => {
                    this.datalists = response.data.data;
                })
          },

Which are then output via v-for

<template v-for="(list, index) in datalists" v-model="datalists">

And it is the last v-for that has a delayed rendering. What spoils the feeling of reactivity)
I tried to fetch the lists in the parent component and pass them through props (i.e., the fetchDatalists method is launched not in the ModalList child component, but in the parent and then simply passes the data array to the child). Yes, then the problem with rendering disappears. But another problem appears that is no longer of an aesthetic nature - I need to change the datalists data array (via VUE.set), and props, as far as I read, cannot be changed. Generally. How can I synchronize the rendering of f-vor inside the modal so that the generated list of data is shown inside the modal along with the rendering of the modal, and not after it?

Answer 1

As a result, during the discussion, solutions were found:
1) The activ property, which is used to open the modal, is transmitted along with data from the server. This way the modal will not appear before the list is rendered and they will be rendered synchronously. The disadvantage of this bike is the delay in the appearance of the modal until the data arrives.
2) Transfer the already formed data array from the parent. And if you need to change the props, then make a request to the parent via this.$emit and already in the parent change the necessary data in the array via vue.set
3) Hide data loading behind the modal animation.
I settled on the second option. Thanks to Sergey delphinpro and Evgeny Kulakov for ideas

Answer 2

Obviously, there are at least two options:
1. pass a ready-made list so that rendering occurs immediately with the data already available
2. take the data in the component, but do not show it until it is received. Those. inside the modal on the root element put v-show="active" eg active = true - when you got the data.