Embed MQL5 Calendar Widget to website not working with Vuejs 2



I'm trying to embed MQL5 Widget to my website. I read the instruction and wrap the code to run on my front-end library (Vue 2)

The instruction link: https://www.mql5.com/en/economic-calendar/widgets

However, 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 load every time the component is mounted without having to reload page. Please help me with this.

Here is the code in main.js :

import LoadScript from "vue-plugin-load-script";

Here is the code in component: 

  <b-row class="justify-content-center mx-5 calendar__content">
    <b-col lg="12" class="px-0">
      <div id="economicCalendarWidget"></div>
export default {
  mounted() {
      ).then(() => {
        new economicCalendar({
          width: "100%",
          height: "700px",
          mode: 2,


Thank you

Economic calendar widget
Economic calendar widget
  • www.mql5.com
Set (customize) and place the economic calendar widget on your website with automatic updates in real time.

The Widget is designed to be placed in a normal webpage, not to be dynamically rendered via JavaScript after the fact.

So your query has nothing to do with this forum. I suggest using a forum dedicated to Vue instead.