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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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”をつける

1
2
3
4
<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分くらい😱