Why does it not work without @, but with @ it prints {{message}}?

Question

Vue.js

Good afternoon, I started learning vue js together with laravel!
should output the text hello vue and outputs {{ message }} ??? and if you remove @ then an error! The constant is not correct, I understand.

<div id="app">
    @{{ message }}
</div>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Привет, Vue!'
    }
})

Answer 1

The documentation describes

Answer 2

I would advise that everything related to vue should be surrounded by verbatim tags. And include the template components in the template block and throw them somewhere outside the "blade". Or even make an SFC file where both the component code and its template are at once.

<script src="https://unpkg.com/http-vue-loader"></script>

The http-vue-loader library (look for it on github + there is an instruction there) will help you load them "transparently" without builders, webpacks and dances with a tambourine.