Vue.js (TypeScript使用) のコンポーネント内で定義した dataを Quill (WYSIWYG) のイベントハンドラーで更新したい

Question

1. やりたいこと

Quillのカスタムモジュールを作成するために、
まずは、確認のために簡単なモジュールで確認をしています。
具体的には、リッチエディタに記述された文字数を出力するだけの
シンプルなVueコンポーネントを作りました。

参考サイト

2. わからないこと

Quillのカスタムモジュールを機能を利用して
任意のイベントハンドラーを登録できるのですが、
その中で Vueコンポーネントの data を更新する方法をご教示頂きたいです。

3. プログラム

以下が現在困っていることを再現したプログラムです。

コンストラクタ内部の

this.textLength = text.length;

にて、Vueのクラス変数の textLength に値を設定したいのですが、
この処理では、設定されません。

以下に該当箇所のプログラム全体を添付します。

<template>
  <vue-editor v-model="content" :editorOptions="editorSettings"></vue-editor>
  <div>{{ textLength }}</div>
</template>

<script lang="ts">
export default class ClassName extends Vue {
  
  // vue-editor に記述されたテキストの文字数を格納
  private textLength = 0;
  
  // vue-editorの設定
  get editorSettings(): any {
    return {
      modules: {
        counter: true,
      },
    };
  }

  // コンストラクタ
  constructor() {
    super();
    Quill.register('modules/counter', (quill: any, options: any) => {
      quill.on('text-change', () => {
        const text = quill.getText();
        this.textLength = text.length;
      });
    });
  }
}
</script>

4. 試したこと

this のスコープの問題かと思い、

quill.on('text-change', () => {

の処理内部で

console.log(this)

を実施しました。
すると、コンソールに表示されたのは Vueコンポーネントの情報でした。
(textLength の値は更新されていた)
なのにも関わらず、 Chrome拡張の Vue開発者ツールで data を確認すると
textLength の値は変化していませんでした。
(thisのスコープの問題ではなさそう)

5. 最後に

本件、大変困っております。
大変恐縮でございますが、
ご回答頂けますと大変うれしく思います。
何卒よろしくお願い致します。

Answer 1

自己解決しました。
以下のように editorOptions で関数を渡せば
期待通りの動作になりました。

<vue-editor
      :editorOptions="editorSettings"
></vue-editor>

private selectedText(text: string) {}

private editorSettings = {
  modules: {
    selectionChange: {
      selectedText: this.selectedText,
    },
  },
};