[Vuejs]-I can't access the message variable of vue

by

0👍

✅

Based on answer to your comment.

You can have multiple Vue apps on a page like so:

@extends('app')
@section('content')

<section id="form">
    <div class="container" id="app1"> @{{message}} </div>
    <div class="container" id="app2"> @{{message}} </div>
</section><!--/form-->

@endsection

@mainScript('scripts')
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app1 = new Vue({
        el: '#app1',
        data: {
          message: 'Welcome to vue app1'
        }
    })

    var app2 = new Vue({
        el: '#app2',
        data: {
          message: 'Welcome to vue app2'
        }
    })
</script>
@mainScript

Leave a comment