ご無沙汰しております。
今まで使い慣れたjQueryばかり使っておりましたが、巷ではVue.jsやReact.jsなどいろいろなフレームワークがありますね。
なので、初心者として挑戦していきたいと思います。

参考：Vue.js入門 – とほほのWWW入門

https://www.tohoho-web.com/ex/vuejs.html#start

Vue.jsを読み込む

とほほのWWW入門の流れで、まずは1つ目を実施していきたいと思います。

ModXの新規リソースを作成し、リッチテキストではなく本文にソースを直書きしていきます。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

まずはVue.jsの読み込みですね。上記はminもあるみたいですので、お好みの方を記載しましょう。

「指定したテキストを指定した箇所に出力する」

参考サイト上ではHello World!を出力していますね。
まずは、出力させる場所を定義します。

<div id=”message_area”>{{message}}</div>

つぎに、javascriptを書いていきます。

<script>
var app1=new Vue({
el:’#message_area’,
data:{message:’メッセージ①’}
})
</script>

保存し、プレビュー。これで「指定したid」のエレメントの指定した箇所のテキストが出力されるはず。
結果は？

あれ？出てない

はい。出ませんでした。
何か記述を間違えたでしょうか？

ソースを見ていきます。chrome開発者ツールでは置換された結果になってしまうので、ソースで見ます。

{{message}}が消えています。

ふと気付く。「{{ }}」の記述はModXのチャンクの呼び出しと同じ。
ということで、ModXがVue.jsではなくチャンクと認識していｍて、ソースにした段階で消えていると。

ModXタグのエスケープ

普段エスケープしながらソースを書く機会はないので、確認。

各種タグ記述について｜MODX 日本公式サイト

https://modx.jp/docs/tags/

こちらの「MODXタグ自体を記述したい！」を見ると、
「[<!—->*変数名*<!—->]」と記載せよとのこと。なので、

{<!—->{message}<!—->}と記載。

これで、正常に動きました！

出力結果

この続きも順次やってみましょう。。。