Toolbar styles are sometimes not loaded

[jakob-lilliemarck]

Describe the bug

Then re-using the same component that locally registers vue-quill-editor, the toolbar styles (snow-theme) are not loaded after visiting a few routes where the editor is mounted. The toolbar is rendered with default html styles.

How are toolbar styles loaded? It seems like there is some race condition here, or it could be that there is some global registration going on? Is vue-quill-editor registered with the Vue instance or something?

Reproduction

Based on the example from the readme, but with custom icon overrides this error occurs on subsequent loads of the component when used in a drawer thats conditionally rendered. In running the component it appears the ref to the quill editor cannot be found when printing the message in the ``mounted()hook i get the following: [Vue warn]: Error in mounted hook: "TypeError: this.$refs.myQuillEditor is undefined"`

<template>
  <quill-editor
    :content="content"
    :options="editorOption"
    @change="onEditorChange($event)">
    <template #toolbar>
      <div id="k-toolbar">
        <button class="ql-bold toolbar-button">Bold</button>
      </div>
    </template>
  </quill-editor>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Quill from 'quill'
import { quillEditor } from 'vue-quill-editor'

import iconBold from '@/assets/images/RichTextEditorIcons/bold.svg'

const icons = Quill.import('ui/icons')

icons.bold = `<img src="${iconBold}" class="toolbar_editor_icon test">`

export default {
  components: { quillEditor },
  props: { content: String },
  data () {
    return {
      content: '<h2>I am Example</h2>',
      editorOption: {
        modules: {
          toolbar: '#k-toolbar'
        }
      }
    }
  },
  methods: {
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  mounted() {
    console.log('this is current quill instance object', this.editor)
  }
}
</script>

System Info

System:
    OS: Linux 5.15 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 7 PRO 5850U with Radeon Graphics
    Memory: 1.53 GB / 11.58 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.15.0 - /usr/bin/node
    Yarn: 1.22.19 - /var/lib/snapd/snap/bin/yarn
    npm: 8.5.5 - /usr/bin/npm
  Browsers:
    Firefox: 101.0
  npmPackages:
    @commitlint/cli: ^13.1.0 => 13.2.1 
    @commitlint/config-conventional: ^13.1.0 => 13.2.0 
    @fortawesome/fontawesome-pro: ^6.0.0-beta3 => 6.0.0-beta3 
    @fortawesome/fontawesome-svg-core: ^1.3.0-beta3 => 1.3.0-beta3 
    @fortawesome/free-brands-svg-icons: ^6.1.0 => 6.1.0 
    @fortawesome/pro-duotone-svg-icons: ^6.0.0 => 6.0.0 
    @fortawesome/pro-light-svg-icons: ^6.0.0-beta3 => 6.0.0-beta3 
    @fortawesome/pro-solid-svg-icons: ^6.0.0 => 6.0.0 
    @fortawesome/vue-fontawesome: ^2.0.6 => 2.0.6 
    @prettier/plugin-ruby: ^1.6.0 => 1.6.1 
    @rails/actioncable: ^6.0.0 => 6.1.4 
    @rails/activestorage: ^6.0.0 => 6.1.4 
    @rails/ujs: ^6.0.0 => 6.1.4 
    @rails/webpacker: 5.4.2 => 5.4.2 
    actioncable-vue: ^2.5.1 => 2.5.1 
    ant-design-vue: ^1.7.4 => 1.7.8 
    axios: ^0.21.1 => 0.21.4 
    babel: ^6.23.0 => 6.23.0 
    babel-eslint: ^10.1.0 => 10.1.0 
    babel-plugin-import: ^1.13.3 => 1.13.3 
    babel-preset-vue: ^2.0.2 => 2.0.2 
    bootstrap-utilities: ^4.1.3 => v4.1.3 
    chroma-js: ^2.4.2 => 2.4.2 
    concurrently: ^6.2.1 => 6.2.1 
    core-js: ^3.18.0 => 3.18.3 
    css-loader: ^5.2.0 => 5.2.7 
    css-minimizer-webpack-plugin: ^1.3.0 => 1.3.0 
    eslint: ^7.32.0 => 7.32.0 
    eslint-config-airbnb-base: ^14.2.1 => 14.2.1 
    eslint-config-prettier: ^8.3.0 => 8.3.0 
    eslint-plugin-import: ^2.24.0 => 2.24.2 
    eslint-plugin-vue: ^7.16.0 => 7.19.1 
    husky: ^7.0.1 => 7.0.2 
    install: ^0.13.0 => 0.13.0 
    js-cookie: ^2.2.1 => 2.2.1 
    less: ^4.1.1 => 4.1.2 
    less-loader: ^7.0.0 => 7.3.0 
    less-vars-to-js: ^1.3.0 => 1.3.0 
    lint-staged: ^11.1.2 => 11.1.2 
    lodash: ^4.17.21 => 4.17.21 
    mini-css-extract-plugin: ^1.3.9 => 1.6.2 
    moment: ^2.24.0 => 2.29.1 
    pdfobject: ^2.2.7 => 2.2.7 
    prettier: 2.4.1 => 2.4.1 
    quill: ^1.3.7 => 1.3.7 
    quill-auto-links: ^0.1.3 => 0.1.3 
    quill-emoji: ^0.2.0 => 0.2.0 
    quill-paste-smart: ^1.4.8 => 1.4.9 
    quill-upload: ^0.0.7-rc.2 => 0.0.7-rc.2 
    regenerator-runtime: ^0.13.9 => 0.13.9 
    speed-measure-webpack-plugin: ^1.5.0 => 1.5.0 
    terser-webpack-plugin: ^4.2.3 => 4.2.3 
    uuid: ^8.3.2 => 8.3.2 
    video.js: ^7.18.1 => 7.18.1 
    vue: ^2.6.12 => 2.6.14 
    vue-color: ^2.7.1 => 2.8.1 
    vue-input-autowidth: ^1.0.11 => 1.0.11 
    vue-loader: ^15.9.8 => 15.9.8 
    vue-password-strength-meter: ^1.7.2 => 1.7.2 
    vue-quill-editor: ^3.0.6 => 3.0.6 
    vue-recaptcha-v3: 1.9.0 => 1.9.0 
    vue-router: ^3.5.1 => 3.5.2 
    vue-spinner: ^1.0.3 => 1.0.4 
    vue-tel-input: ^5.2.0 => 5.6.2 
    vue-template-compiler: ^2.6.12 => 2.6.14 
    vue2-dropzone: ^3.6.0 => 3.6.0 
    vuedraggable: ^2.24.3 => 2.24.3 
    vuex: ^3.6.2 => 3.6.2 
    vuex-persistedstate: ^4.0.0-beta.3 => 4.1.0 
    webpack: ^4.46.0 => 4.46.0 
    webpack-bundle-analyzer: ^4.4.2 => 4.4.2 
    webpack-dev-server: ^3.11.2 => 3.11.2 
    zxcvbn: ^4.4.2 => 4.4.2

Used Package Manager

yarn

Validations

• Read the the documentation in detail.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.