How do I pass a blade variable to a vue instance so I can use it in my JavaScript file?

I am building an access control list where every role in the application will have a set of permissions. I am trying to create an Edit Role page which would show a list of check boxes and the selected boxes would be the permissions that role already has. I have an array of permissions associated to a role that I want to have access to from my JavaScript file. That is, I have an array $role->permissions->pluck('name')) that I want to have access to from my Vue instance. Then from this instance, bind the property permissionsSelected to the checkboxes in my blade file. This is my edit page. (I am using the UI component Buefy for the checkboxes hence the tag <b-checkbox></b-checkbox>)

Edit.blade.php

@extends('layouts.manage')

@section('content')
<div class="flex-container">
<div class="columns m-t-10">
  <div class="column">
    <h1 class="title">Edit </h1>
  </div>
  <div class="column">
    <a href="" class="button is-primary is-pulled-right"><i class="fa fa-user-plus m-r-10"></i> Edit this Role</a>
  </div>
</div>
<hr class="m-t-0">
<form action="" method="POST">
  
  

<div class="columns">
  <div class="column">
    <div class="box">
      <article class="media">
        <div class="media-content">
          <div class="content">
            <h2 class="title">Role Details:</h2>

            <div class="field">
              <p class="control">
                <label for="display_name" class="label">Name (Human Readable)</label>
                <input type="text" class="input" name="display_name" value="" id="display_name">
              </p>

            </div>

            <div class="field">
              <p class="control">
                <label for="name" class="label">Slug (Cannot be edited)</label>
                <input type="text" class="input" name="name" value="" disabled id="name">
              </p>

            </div>

            <div class="field">
              <p class="control">
                <label for="description" class="label">Description</label>
                <input type="text" class="input" value="" id="description">
              </p>

            </div>

          </div>
        </div>
      </article>
    </div>
  </div>
</div>

<div class="columns">
  <div class="column">
    <div class="box">
      <article class="media">
        <div class="media-content">
          <div class="content">
            <h2 class="title">Permissions:</h2>

              @foreach ($permissions as $permission)
                <div class="field">
                  <b-checkbox v-model="permissionsSelected" native-value=""> <em>()</em></b-checkbox>
                </div>

              @endforeach


          </div>
        </div>
      </article>
    </div>
  </div>
</div>
</form>
</div>
@endsection

This is the Vue instance in my JavaScript file App.js

const app = new Vue({
el: '#app',
data: {
    auto_password: true,
    password_options: 'keep',
    permissionType: 'basic',
    permissionsSelected: '',
resource: '',
crudSelected: ['create', 'read', 'update', 'delete']
    },

    methods: {
    crudName: function(item) {
      return item.substr(0,1).toUpperCase() + item.substr(1) + " " + app.resource.substr(0,1).toUpperCase() + app.resource.substr(1);
    },
    crudSlug: function(item) {
      return item.toLowerCase() + "-" + app.resource.toLowerCase();
    },
    crudDescription: function(item) {
      return "Allow a User to " + item.toUpperCase() + " a " + app.resource.substr(0,1).toUpperCase() + app.resource.substr(1);
    }
  }
 });

I want to be able to do something like this permissionsSelected: {!!$role->permissions->pluck('id')!!} in my JS file. How do I solve this?

via Chebli Mohamed