Content Will Only Display After Reload - vue-router

Question

I'm attempting to display a simple calendar based on the jsCalendar library. When I navigate to the page, the calendar won't appear; however, when I reload the page [⌘-R] or enter the page URL directly, the content appears normally. I've tested in Safari and FireFox and the behavior is the same.
Desired Outcome:
Display the content when the page is reached via Vue Router or direct navigation.
Calendar.vue
<template>
<div class="auto-jsCalendar black-theme"
data-navigator-position="right"
data-month-format="month YYYY"
data-day-format="DDD">
</div>
</template>
<script>
import 'simple-jscalendar'
export default {
emits: ['page-data'],
mounted() {
this.$emit('page-data', {title: 'calendar', content: '',})
},
}
</script>
<style>
#Import '~simple-jscalendar/source/jsCalendar.css';
#Import '~simple-jscalendar/themes/jsCalendar.darkseries.css';
</style>
Navigating to Calendar.vue
When navigating to the page, the div looks like this:
<div class="auto-jsCalendar black-theme" data-navigator-position="right" data-month-format="month YYYY" data-day-format="DDD"></div>
Reload or Direct Navigation
When reloading the page or entering the URL directly into the browser, the div looks like this:
<div class="auto-jsCalendar black-theme" data-navigator-position="right" data-month-format="month YYYY" data-day-format="DDD" jscalendar-loaded="true"></div>
(The dynamic attribute jscalendar-loaded (which is added to the div when the calendar object is displayed) is not established when navigating to the page.)
Environment:
Dave#[SNIP] my_spa % npm list
my_spa#0.1.33 /.../my_spa
├── #vue/cli-plugin-babel#4.5.15
├── #vue/cli-plugin-router#4.5.15
├── #vue/cli-plugin-vuex#4.5.15
├── #vue/cli-service#4.5.15
├── #vue/compiler-sfc#3.2.20
├── babel-eslint#10.1.0
├── chart.js#3.6.0
├── chartjs-plugin-annotation#1.1.0
├── chartjs-plugin-datalabels#2.0.0
├── core-js#3.19.0
├── eslint-plugin-vue#7.20.0
├── simple-jscalendar#1.4.4
├── vue-router#4.0.11
├── vue#3.2.20
├── vue3-smooth-dnd#0.0.2
├── vuex-persist#3.1.3
└── vuex#4.0.2
EDIT: In consulting with the author of jsCalendar, I've come to learn that the script acts on the page load event which explains why the content doesn't update when navigating to the view. The external script has an autoFind() function which could be called from mounted() which should update the content; however, I've been unable to find the right way to call the function.
import jsCalendar from 'simple-jscalendar'
mounted() {
jsCalendar.autoFind()
this.$emit('page-data', {title: 'calendar', content: '',})
},
results in:
Unhandled Promise Rejection: TypeError: simple_jscalendar__WEBPACK_IMPORTED_MODULE_0___default.a.autoFind is not a function.

Answer 1

I looked at the documentation from the link, here is what I would do:
remove the auto-jsCalendar from the div as this is the hook that makes it work when you load the page, but not when you navigate and add a ref.
Then in your mounted hook call the jsCalendar.new as documented here:
https://gramthanos.github.io/jsCalendar/docs.html (Javascript Create Calendar)
<template>
<div class="black-theme"
data-navigator-position="right"
data-month-format="month YYYY"
data-day-format="DDD"
ref="calendar">
</div>
</template>
<script>
import 'simple-jscalendar'
export default {
emits: ['page-data'],
mounted() {
jsCalendar.new(this.$refs.calendar)
this.$emit('page-data', {title: 'calendar', content: '',})
},
}
</script>
<style>
#Import '~simple-jscalendar/source/jsCalendar.css';
#Import '~simple-jscalendar/themes/jsCalendar.darkseries.css';
</style>
Though in the long run I'd suggest to look for a library that was built for Vue. It is always a bit tricky if a third party library manipulates the DOM that is also used from Vue.