Embed MQL5 Calendar Widget to website not working with Vuejs 2

[pastsad2010]

Hello, 

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";

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>

Thank you

[[Deleted]]

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.