[Vue.js] jQueryでv-modelを挿入したいが動作しない

Question

https://teratail.com/questions/344519

上記でも質問させていただいたのですが、結果解決できませんでしたので再度質問させてください。
WordPressの管理画面でVue.jsを使いたいのですが、HTMLを直接触れないのでjQueryでv-modelプロパティを所持したp要素を挿入して、
バインディングさせようと下記のコードを記述しましたが、p要素の中にメッセージが表示されません。
これを実現するにはどのような対処が必要でしょうか。
ページ全体はid #appで囲われている

<script>
	jQuery( function($){
		$('#member').after('<p v-html="message"></p>');
	});

	new Vue({
		el: '#wpwrap',
		data: {
			message: 'Hello!'
		},
		methods: {
			
		}
	});
</script>

Answer 1

new Vueもfunction($){...}の中に書いてください。

jQuery( function($){の中身は、条件が整ってから実行されますので、このままでは外に書いたnew Vueのほうが先に実行されてしまいます。

Comments

[maisumakun]

このような例なら問題はないのですが、「Vue.jsで描画した内容をjQueryから操作する」ようなことは、Vue.js側の動作に支障をきたしますので、適切ではありません。

[Anon_]

すみません、返答が遅くなりました。
ありがとうございます、動作を確認させていただきます！

[Anon_]

確認したところ仰る通りの方法で表示できました！
本当に助かりました。
補足の件も参考にさせていただきます。

BAとさせていただきます。

[Anon_]

el: '#wpwrap',
の指定のように画面全体をvueの対象とすると、これまでjQueryで動作していた部分が反応しなくなってしまうようなのですが、こういうものなのでしょうか。

[maisumakun]

そういうものです。

Vueをはめ込んだ#wpwrap以下は、jQueryで変更してはいけません（Vueと干渉してまともに動作しません）。

[Anon_]

ありがとうございます。
大変勉強になりました。