Render MQL5 Widget Calendar dynamically on my website

[NgoXiem]

Hello,

I'm trying to embed MQL5 Widget Calendar on my website. I read the instruction and wrap the code to run on Vue2.

The link to the widget: here

When the component is mounted or when I change route, the widget doesn't load. Only when I reload the whole page I can see the widget. I need the widget to render dynamically without having to reload page. Please help me with this. Thank you!

Here is the code in main.js :
import LoadScript from "vue-plugin-load-script"; Vue.use(LoadScript);

Here is the code in component:
<template> <b-row class="justify-content-center mx-5 calendar__content"> <b-col lg="12" class="px-0"> <div id="economicCalendarWidget"></div> </b-col> </b-row> </template>
<script> export default { mounted() { this.$loadScript("https://www.tradays.com/c/js/widgets/calendar/widget.js?v=12") .then(() => { new economicCalendar({ width: "100%", height: "700px", mode: 2}) }); }, } </script>