What is correct way to re-render one component from another [Vue.js]

Question

I have select :

  <select @change="getValuesFromDate($event)">
                        <option value="1">Last 24 hours</option>
                        <option value="7">Last7 days</option>
                        <option value="30">Last 30 days</option>
                        <option>Custom date</option>
                    </select>

and chart component

                          <graph-component
                                :key="graphKey"
                                v-bind="measurement"
                                :value="valueOfMeasurement(measurement)"
                                :time_date="dateOfMeasurement()"
                            ></graph-component>

Function getValuesFromDate($event) calls API:

   getValuesFromDate(event) {
        let apiLink ="https://api.thingspeak.com/channels/1111111/feeds.json?api_key=XXXXXXXXXXXX&days=" +event.target.value +"&round=2&average=";
        let preferableSize = 0;
        if (event.target.value == 1) {
            preferableSize = 60;
        } else {
            preferableSize = 1440;
        }
        try {
            axios
                .get(apiLink + preferableSize, {
                    withCredentials: false
                })
                .then(response => {
                    this.message = response.data;
                });
            this.graphKey+= 1;
        } catch (error) {}
    }

When I change select (and call this function) I re-render graph-component by changing it key, and it works just fine. What is better and more correct way to do this or this one is fine enough?

Answer 1

@Lube this is the best way to force a re-render of a component. I've needed to do the same for graph components in the past when my data changes.

There's a great article I've linked to below that explains the various ways of forcing a re-render, but ultimately the best way is adding a :key property to your component and updating that key whenever you need a re-render.

Article can be found here .