document.querySelector is null vuejs laravel - laravel

Question

I've tried to find references, but haven't solved it, I have the code below..
why document.querySelector('meta[name="user_id"]').content
Uncaught TypeError: document.querySelector(...) is null
this my code
html
<div class="card">
<div class="card-body card-message" id="card-message-scroll">
<ul v-if="isActive != null" class="list-group list-group-flush">
<div v-for="(message, index) in messages" v-bind:key="index">
<li v-if="message.from_id != {{ auth()->user()->id }}" class="list-group-item">
<div class="list-message-item">
<div class="media">
<img class="mr-3 rounded-sm rounded-circle" :src="message.avatar" alt="profile">
<div class="media-body">
<div class="alert alert-primary mb-0"> #{{ message.content }}
</div>
<small>
<i>#{{ new Date(message.created_at).toLocaleDateString()}}</i>
</small>
</div>
</div>
</div>
</li>
<li v-else class="list-group-item">
<div class="list-message-item right">
<div class="alert alert-secondary mb-0"> #{{ message.content }}
</div>
<small class="float-right">
<i>#{{ new Date(message.created_at).toLocaleDateString()}}</i>
</small>
</div>
</li>
</div>
</ul>
<h5 v-else class="text-center">Pilih user untuk mengirim pesan</h5>
</div>
</div>
this my app.js
new Vue({
el: '#app',
data: {
id: document.querySelector('meta[name="user_id"]').content,
},
mounted() {
},
methods: {
scrollToEnd: function () {
let container = this.$el.querySelector("#card-message-scroll");
container.scrollTop = container.scrollHeight;
}
},
watch: {
messages: _.debounce( function() {
this.scrollToEnd()
}, 10),
}
})
Uncaught TypeError: document.querySelector(...) is null
why ?