Calendly widget doesn't work after page refresh when live

The calendly widget works at first, but if you refresh the page it stops working but only when the website is live. In local development, no such issue occurs.

Also noticed that when I route to the page through navigation, it works. But if I enter the link to the specific page directly, it doesn't work.

Here's the code:

    <template>
  <client-only>
    <vue-calendly url="link" :height="650"></vue-calendly>
  </client-only>
</template>

<script>
import Vue from 'vue';

export default {
  created() {
    if (process.isClient) {
      const VueCalendly = require('vue-calendly').default;
      Vue.use(VueCalendly);
    }
  }
};
</script>

The Vue application is running on Gridsome so it's SSR. I set the widget to only display in client side. Not sure what the issue is.

There is a solution possible to integrate Calendly without using their widget. You can try it as well. This solution should not produce the error mentioned and was tried in an SSR application.

<template>
  <!-- Calendly inline widget begin -->
  <div class="calendly-inline-widget" data-url="YOUR_CALENDLY_URL" style="min-width:320px;height:630px;"></div>
  <!-- Calendly inline widget end -->
</template>
    
<script>
export default {
  mounted () {
    const recaptchaScript = document.createElement('script')
    recaptchaScript.setAttribute('src', 'https://assets.calendly.com/assets/external/widget.js')
    document.head.appendChild(recaptchaScript)
  }
}
</script>