blade内に直接記入したVueへcontroller側から渡した値を渡したい

Question

Vueが完全初心者なのですが、急ぎ使用しなくてはいけない状態なので教えて頂けると幸いです。

一部抜粋したコードです。
下記の一番下の赤く記されているURLをcontrollerから受け取った値を入れて完成させたいのですが、{{ }}を使用しても入らず詰まっています。

            //省略

            <div>
                <button class="btn btn-primary active"　type="button" @click="send">送信</button>
            </div>
        </div>

    </div>


{{-- 下記Vue --}}
    <script src="{{ asset('/js/app.js') }}"></script>

    <script>
    new Vue({
        el: '#GGGG',
        data: {
            message: '',
            messages: [],
        },
        methods: {
            getMessages() {
                const url = 'http://localhost/MYApp/public/AAAA'+'/'+{{ $project }}; //controllerから値を渡してURLを作りたい
                axios.get(url)
                    .then((response) => {
                        this.messages = response.data;
                    });

                },

//以下省略

完全にVueについて分からないのですが、押し付けられたので現在闇雲に試しています。。。
教えて頂けると幸いです。

Answer 1

blade側に以下のように記述しておいて、

<div id="sample" data-project="{{$project}}" />

vue側で以下のようにDOMから取得することもできます。

const element = document.getElementById('sample');
const project = element.dataset.project;
console.log(project)

Answer 2

正しいのかわかりませんが、こちらで動作はしているようです。
もう少し様子をみてみたいと思います。。。

   var param = <?php echo json_encode($project);?>;
   const url = 'http://localhost/MYApp/public/AAAA'+'/'+ param;