Vue.jsでインスタンスのネスト(if-vの中でv-mode.trim)の表示方法

v-ifで、trueだった場合に、v-model.trimで文字数をカウントしたい場合。
v-ifの中にv-model.trimが入っているので、いわゆるネスト
この場合、new Vueを続けて書いてもうまく行かない

<div id="app">
	<div v-if="display">
		<div id="job">
		    <input type="text" name="title" v-model.trim="message" maxlength="20" placeholder="20文字以内で入力してください">
		    <span class="char-length">{{ message.length }}/20</span>
		</div>
	</div>
	<div v-else>
		<p>表示なし</p>
	</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
		el: "#app",
		data: { 
			display: true
		}
	});
new Vue({
		el: "#job",
		data: { message: "what up bro!"}
	});
</script>

どうするかというと、子供のインスタンスのidに”v-pre”をつける

<div id="job" v-pre>
		    <input type="text" name="title" v-model.trim="message" maxlength="20" placeholder="20文字以内で入力してください">
		    <span class="char-length">{{ message.length }}/20</span>
		</div>

すると、上手く表示されます。
嵌ったー、15分くらい😱