Update editor inside Vue watcher

v6
1

I’m using CodeMirror inside a Vue component. I initialize the editor with some starter code like so inside the mounted lifecycle hook of the component:

mounted() {
    let parent = foo;
    this.cm = new EditorView({
      extensions: [
        EditorState.tabSize.of(16),
        history(),
        keymap.of(vscodeKeymap),
        python(),
        syntaxHighlighting(defaultHighlightStyle),
        lineNumbers(),
        codeFolding(),
        foldGutter({
          markerDOM: function (open) {
            let icon = document.createElement("i");
            let direction = open ? "down" : "right";
            icon.classList.add('fas');
            icon.classList.add(`fa-chevron-${direction}`);
            return icon;
          }
        }),
        EditorView.updateListener.of((e) => {
          if (e.docChanged) {
            this.content = e.state.doc.toString();
          }
        })
      ],
      doc: this.activeSnapshot.write_code_content,
      parent
    })

The user has the option to “reset” the editor at any time, which creates a new “snapshot” with the original “write_code_content”. I have a watcher in the Vue component that listens for the presence of a new snapshot. When this happens, I want to update the editor content with the incoming “write_code_content”.

I’ve tried to follow the documentation, but dispatching a transaction doesn’t seem to be working:

watch: {
  activeSnapshot: {
      deep: true,
      handler(newSnapshot) {
        this.cm.dispatch({ from: 0, to: this.cm.state.doc.length, insert: newSnapshot.write_code_content });
      }
    }
}

The editor content doesn’t change afterwards.

Does anyone have suggestions for what I could try differently?