I'm currently developing a Vue application that utilizes Vue router. I've been attempting to integrate the jscolor script found at here. Essentially, you just need to include the script and apply the jscolor class to an HTML element. I am working with single file components (SFC) in Vue.
HTML/Vue template
<div class="form-group row">
<label for="departmentColor" class="col-sm-2 col-form-label label">{{ t('Color') }}</label>
<div class="col-sm-10">
<input type="text" class="CN-input-field jscolor" id="departmentColor" :value="department.color" @change="changeColor" :style="`background-color: ${department.color}`">
</div>
</div>
JS
// Local deps (js file)
import jscolor from '../../../assets/js/jscolor';
Currently, the functionality works as expected when I perform a hard refresh on the page itself. However, if I navigate to the page from another page, it seems that the script is not loaded properly because the color picker is inactive.
Has anyone else encountered this issue with a similar dependency? Are there any potential solutions available?