I have a quill text editor and as a default I want to set it as readonly and when the button is clicked, this should be true/false. So here is my component:

<template>
  <div ref="editor"></div>
</template>

<script>
import Quill from 'quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.bubble.css';
import 'quill/dist/quill.snow.css';

export default {
  props: {
    disabled: { type: Boolean, default: false },
    value: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      editor: null,
    };
  },
  mounted() {
    this.editor = new Quill(this.$refs.editor, {
      modules: {
        toolbar: [
          [{ header: [1, 2, 3, 4, false] }],
          ['bold', 'italic', 'underline']
        ]
      },
      readOnly: this.disabled,
      theme: 'snow',
      formats: ['bold', 'underline', 'header', 'italic']
    });

    this.editor.root.innerHTML = this.value;

    this.editor.on('text-change', () => this.update());
  },

  methods: {
    update() {
      this.$emit('input', this.editor.getText() ? this.editor.root.innerHTML : '');
    }
  }
}
</script>

I am sending this value as a prop to my component which is 'disabled' and when I click the button true becomes false and when I click again visa versa. So there is nothing wrong with that. Also when I do readOnly: true, or readOnly: false it works but with this way, readOnly: this.disabled it doesnt work.

I am using vue but I created a component based on quilljs directly.

The documentation I use is this one: https://quilljs.com/docs/configuration/#readonly