【javascript】tweetでURLをシェアする機能を作りたいが、URLクエリパラメーターが表示されない

結論から説明すると、URLエンコードしたURLをツイートすると、ツイート時にデコードされ、URLが日本語表記され、指定したURLに飛べないというエラーです

javascript
1    tweet() {
2      const baseUrl = 'https://relay-composition.web.app/about';
3      const wordURL = encodeURI(this.$route.query.word);
4      const idURL = encodeURI(this.$route.query.id);
5      const queryParam1 = "?word="+wordURL+"&id="+idURL;
6      const url = baseUrl+queryParam1;
7      var shareURL =
8        "https://twitter.com/intent/tweet?text=" +
9        "新しい小説を作ろう" + this.$route.query.word + "に" + this.newPost + "を投稿しました" +
10        "&url=" + url;
11        location.href = shareURL;
12      
13    },

このようなツイートする関数を作成しました。
this.$route.query.wordにはルーティングされたページのテキストフォームに入力されたデータが、動的ルートマッチングによってqueryされています。
例:this.$route.query.word = "タイトル"
this.$route.query.id = "名前"

URL全体 = https://relay-composition.web.app/about?word=モーダル&id=れい

console.log(url)とすると、コンソール上には
https://relay-composition.web.app/about?word=%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB&id=%E3%82%8C%E3%81%84
このような正しいURLが表示されますが、いざツイートする画面までいくと、
https://relay-composition.web.app/about?word=モーダル

このようにqueryの$idの部分が消えてしまい、エンコードしているはずの文字列が日本語に戻ってしまい、リンクになりません。